반응형

reactjs 31

플럭스 대신 Redux를 사용하면 어떤 단점이 있을 수 있습니까?

플럭스 대신 Redux를 사용하면 어떤 단점이 있을 수 있습니까? 닫았습니다. 이 질문은의견 기반의현재 답변을 받고 있지 않습니다. 이 질문을 개선하시겠습니까?이 게시물을 편집하여 사실과 인용문으로 답변할 수 있도록 질문을 업데이트하십시오. 3년 전에 문을 닫았어요 이 질문을 개선하다 최근에 레독스를 발견했어요다 좋아보여요.플럭스보다 Redx를 사용할 때 단점, 단점 또는 단점이 있습니까?감사해요.여기 레독스 작성자! 이 기능을 사용하여 다음과 같은 타협을 합니다. 돌연변이를 피하는 법을 배워야 할 거야플럭스는 데이터 변이에 대해 의견이 없지만 Redux는 돌연변이를 좋아하지 않으며 Redux를 보완하는 많은 패키지는 사용자가 상태를 변이시키지 않는다고 가정합니다.redex-imputable-state-..

programing 2023.03.15

React Dev 도구에 내 구성 요소가 알 수 없음으로 표시됨

React Dev 도구에 내 구성 요소가 알 수 없음으로 표시됨 다음과 같은 간단한 컴포넌트가 있습니다. import React from 'react' import '../css.scss' export default (props) => { let activeClass = props.out ? 'is-active' : '' return ( ) } react dev 툴에서 검색하면 다음과 같이 표시됩니다. React 컴포넌트를 확장해야 하기 때문인가요?이를 변수로 생성하여 작성해야 합니까?이 문제는 익명 함수를 구성 요소로 내보낼 때 발생합니다.기능(구성 요소)의 이름을 지정한 다음 내보내면 React Dev Tools에 제대로 표시됩니다. const MyComponent = (props) => {} exp..

programing 2023.03.10

React/J에서 물결 괄호를 일반 텍스트로 렌더링SX

React/J에서 물결 괄호를 일반 텍스트로 렌더링SX 반응에서 { 및 }을(를) 텍스트로 표시하는 데 문제가 있습니다.누군가 끈 전체를 컬로 감싸라고 한 것과 비슷한 질문을 보았지만, 이것은 효과가 없습니다. let queries_block = this.state.previous_queries.map((dataset) => { return ({"{{}}"}) }); if (results) { results_block = ( Queries: {queries_block} Results: {results_count} ); } else { results_block = null; } 그return ({"{{}}"})원인들 ERROR in ./src/components/app.js Module build fail..

programing 2023.03.10

MUI 스타일을 사용하여 부모 위로 이동할 때 자녀의 스타일을 어떻게 변경합니까?

MUI 스타일을 사용하여 부모 위로 이동할 때 자녀의 스타일을 어떻게 변경합니까? 반응으로 MUI를 사용하고 있어요예를 들어 다음과 같은 스타일의 컴포넌트가 있다고 합시다. const useStyles = makeStyles(theme => ({ outerDiv: { backgroundColor: theme.palette.grey[200], padding: theme.spacing(4), '&:hover': { cursor: 'pointer', backgroundColor: theme.palette.grey[100] } }, addIcon: (props: { dragActive: boolean }) => ({ height: 50, width: 50, color: theme.palette.grey[400]..

programing 2023.03.10

콘솔에서 종료되지 않은 JSX 콘텐츠 오류를 발생시킵니다.

콘솔에서 종료되지 않은 JSX 콘텐츠 오류를 발생시킵니다. 닫았습니다. 이 질문은재현할 수 없거나 오타가 원인입니다.현재 답변을 받고 있지 않습니다. 이 질문은 오타 또는 더 이상 재현할 수 없는 문제로 인해 발생합니다.비슷한 질문들이 주제일 수 있지만, 이 질문은 미래의 독자들에게 도움이 될 가능성이 적은 방법으로 해결되었다. 2년 전에 문을 닫았어요 이 질문을 개선하다 jspm/systemjs와 babel을 사용하여 기본 리액션 예를 설정하려고 합니다.간단한 페이지를 표시하기 위해 여기에 이 코드가 있는데 오류가 발생합니다. import React from 'react'; export default React.createClass({ displayName: 'MainComponent', propTyp..

programing 2023.03.10

componentDidUpdate와 componentDidMount

componentDidUpdate와 componentDidMount 다음 조건에 해당하는 경우 입력 요소가 포커스를 맞춰야 합니다. DOM 사용 가능 속성이 변경되었습니다. 질문:.둘 다에 코드를 넣어야 합니까?componentDidUpdate그리고.componentDidMount아니면 그냥componentDidUpdate충분할까요? private makeSureInputElementFocused() { if (this.props.shouldGetInputElementFocused && this.inputElement !== null) { this.inputElement.focus(); } } componentDidMount() { this.makeSureInputElementFocused(); // C..

programing 2023.03.10

JavaScript와 JSX의 차이점은 무엇입니까?

JavaScript와 JSX의 차이점은 무엇입니까? 저는 React에 익숙하지 않습니다. 대부분의 튜토리얼에서 JSX에 대해 이야기한 것을 알 수 있습니다.JSX 구문을 배운 적이 없습니다만, React의 JavaScript와 JSX의 주된 사용방법은 HTML과 같은 구문뿐입니까?아니면 또 어떤 점에 유의해야 할까요?JS는 표준 javascript이며, JSX는 이론적으로 React to와 함께 사용할 수 있는 HTML과 같은 구문입니다. 따라서 React 구성 요소를 보다 쉽고 직관적으로 생성할 수 있습니다.문서에서도 언급했듯이 유일한 목적은 React 컴포넌트를 쉽게 만드는 것입니다.다른 건 별로 없어요JSX가 없으면 JS 구문을 사용하여 대형 중첩 HTML 문서를 작성하는 것이 상당히 번거로울 것입..

programing 2023.03.05

여러 테이블 행을 반환하는 React 컴포넌트를 래핑하여 "가 의 자녀로 표시되지 않도록 하려면 어떻게 해야 합니까?여러 테이블 행을 반환하는 React 컴포넌트를 래핑하여 "가 의 자녀로 표시되..

여러 테이블 행을 반환하는 React 컴포넌트를 래핑하여 "가 의 자녀로 표시되지 않도록 하려면 어떻게 해야 합니까?" 오류? OrderItem이라는 컴포넌트가 있습니다.이 컴포넌트는 오브젝트 안에 여러 개의 오브젝트(최소2개)가 있는 오브젝트를 테이블 내에 여러 행으로 렌더링합니다.테이블 안에는 여러 OrderItem 컴포넌트가 있습니다.문제는 컴포넌트의 렌더 기능에서 여러 줄을 반환할 수 없다는 것입니다.부품은 1개만 반송할 수 있고, div로 포장하면 "라고 적혀 있습니다.의 아이로 등장할 수 없다" 코드는 다음과 같습니다(가독성을 높이기 위해 몇 가지를 생략했습니다). Parent() { render() { return ( { _.map(this.state.orderItems, (value, ke..

programing 2023.03.05

왜 Redx의 오브젝트는 불변이어야 합니까?

왜 Redx의 오브젝트는 불변이어야 합니까? 왜 Redx의 오브젝트는 불변이어야 합니까?Angular2와 같은 일부 프레임워크는 onPush를 사용하고 있으며, 보다 빠른 렌더링을 위해 뷰 상태를 비교하는 데 불변성을 이용할 수 있다는 것은 알고 있지만, Redux는 프레임워크에 의존하지 않고 자신의 문서 내에서 불변성을 사용하도록 언급하고 있기 때문에 다른 이유가 있는지 궁금합니다. 피드백 감사합니다.Redx는 상태를 (불변의) 개체로 나타내는 작은 라이브러리입니다.또한 순수한 함수를 통해 현재 상태를 전달하여 완전히 새로운 객체/애플리케이션 상태를 생성함으로써 새로운 상태를 만듭니다. 저쪽에서 눈을 부릅뜨고 있어도 걱정하지 마세요.요약하자면, Redx는 객체 지향 패러다임과 같이 객체를 수정하여 애플..

programing 2023.03.05

리액트 라우터의 동일한 컴포넌트에 대한 다중 경로 이름

리액트 라우터의 동일한 컴포넌트에 대한 다중 경로 이름 3개의 다른 루트에 동일한 컴포넌트를 사용하고 있습니다. 다음과 같이 결합할 수 있는 방법이 있습니까? react-router v4.4.0-beta.4 이후 및 공식적으로 v5.0.0에서는 컴포넌트로 해결되는 경로의 배열을 지정할 수 있습니다. 배열의 각 경로는 정규 표현 문자열입니다. 이 어프로치에 관한 메뉴얼은, 여기를 참조해 주세요. 리액트 라우터 v6 업데이트 React Router v6에서는 경로 배열을 Route 속성으로 전달할 수 없게 되었습니다.대신, 를 사용할 수 있습니다.useRoutes(매뉴얼에 대해서는 여기를 참조) 리액트 훅을 사용하여 동일한 동작을 수행합니다. import React from "react"; import { ..

programing 2023.03.05
반응형