반응형

reactjs 23

mapStateToProps 대신 useselector/useDispatch를 사용해야 합니까?

mapStateToProps 대신 useselector/useDispatch를 사용해야 합니까? 때 후크를 useSelector훅 호출 규칙을 준수해야 합니다(기능 컴포넌트의 최상위 레벨에서만 호출합니다).「 」를 하고 mapStateToProps소품 안에 있는 상태도 문제없이 사용할 수 있습니다.님도 useDispatch 하는 것 외에 ?mapStateToPropsRedux 스토어 상태는 콜백을 포함한 컴포넌트 내의 임의의 장소에서 읽고 변경할 수 있습니다.저장 상태가 변경될 때마다 구성 요소가 다시 렌더링됩니다.컴포넌트가 재렌더되면 useSelector를 다시 실행하여 나중에 원하는 장소에서 사용할 수 있도록 업데이트된 데이터를 제공합니다..useDispatch「」(「」): function Modal..

programing 2023.03.22

ATOM Editor에서 ESLint for React를 설정하는 방법

ATOM Editor에서 ESLint for React를 설정하는 방법 Atom Editor에서 다음 플러그인을 설치했습니다. 린터 린터 에슬린토 JSX 구문을 인식하지 못하는 것 같습니다. 커맨드 라인에서는 동작하고 있습니다만, 다음과 같은 다른 플러그 인을 사용할 필요가 있습니다.esprima-fb그리고.eslint-plugin-reactAtom Editor용 플러그인은 없는 것 같습니다만, 이 문제를 해결하는 방법을 알고 계신 분이 계십니까?Eslint가 React.js와 잘 협력할 수 있도록 하려면: 린터 및 린터 에슬린트 플러그인 설치 달려.npm install eslint-plugin-react 더하다"plugins": ["react"].eslintrc 컨피규레이션파일로 이동합니다. 더하다"e..

programing 2023.03.22

React.js: 튜토리얼의 예가 작동하지 않습니다.

React.js: 튜토리얼의 예가 작동하지 않습니다. http://facebook.github.io/react/docs/tutorial.html에서 React.js 튜토리얼을 진행하고 있습니다.다음은 내 파일입니다. template.template: 및 tut.disc: /** @jsx React.DOM */ var data = [ {author: 'Tldr', text: 'This is a comment'} ] var CommentBox = React.createClass({ render: function() { return ( Comments ) } }) var CommentList = React.createClass({ render: function() { var commentNodes = this..

programing 2023.03.17

'node_modules/@testing-library/react/dist/pure.js'에서 'react-dom/client' 모듈을 찾을 수 없습니다.

'node_modules/@testing-library/react/dist/pure.js'에서 'react-dom/client' 모듈을 찾을 수 없습니다. 실행 중npm test다음 오류가 발생하였습니다. Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js' Required stack: node_modules/@testing-library/react/dist/pure.js node_modules/@testing-library/react/dist/index.js 필요한 패키지는 모두 인스톨 되어 있는 것 같습니다.재인스톨 했습니다.react-dom,하지만 소용이 없어.아래는 테스트 파일에 사용..

programing 2023.03.17

잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩이 초기화되었습니다.

잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩이 초기화되었습니다. 온라인 코스에서 만든 간단한 hellowold react 앱이 있는데 다음과 같은 오류가 나타납니다. 잘못된 구성 개체입니다.API 스키마와 일치하지 않는 구성 개체를 사용하여 웹 팩을 초기화했습니다. - 구성에 알 수 없는 속성 'postcss'가 있습니다.유효합니다. 로더?, 개체 {amd?, bail?, 캐시?, 컨텍스트?, 종속성?, devServer?, devtool?, 엔트리?, 외부?, 로더?, 모듈?, 이름?, 노드?, 출력?, 성능?, 플러그인?, 프로파일, 레코드?InputPath?, recordsO utputPath?, resolvePath?, resolveLoader?, stats?..

programing 2023.03.17

리액트 라우터를 통해 설정된 경로에서 Redx Store에 액세스하는 방법

리액트 라우터를 통해 설정된 경로에서 Redx Store에 액세스하는 방법 리액트 라우터의 리액트 라우터의onEnter핸들러: 제한된 루트를 입력할 때 사용자에게 인증을 요구합니다. 지금까지의 나의routes.js파일은 다음과 같습니다. import React from 'react'; import { Route, IndexRoute } from 'react-router'; export default ( ) 이상적으로, 나는 내 것을 원한다.requireAuth저장소와 현재 상태에 액세스할 수 있는 축소 작업으로서 다음과 같이 작동합니다.store.dispatch(requireAuth()). 유감스럽게도 저는 이 파일의 스토어에 액세스할 수 없습니다.이 경우 원하는 액션에 액세스하기 위해 실제로 사용할 수..

programing 2023.03.17

this.refs.something이 "syslog"를 반환합니다.

this.refs.something이 "syslog"를 반환합니다. 나는 a를 가진 요소를 가지고 있다.ref정의되어 있으며, 최종적으로 페이지에 표시됩니다. ... 다음과 같은 DOM 요소 속성에 액세스하고 싶다.offset...뭐 그런 거.하지만, 나는 계속...undefined왜 그랬는지 도무지 모르겠어요조사해보니 확실히 알 수 있었다refs한 파일에만 적용되지만 이 한 페이지 외에는 사용하지 않습니다.기록하기 위해 이렇게 말하는 거야 console.log('REFS', this.refs.russian); 원인은 무엇입니까?하위 구성 요소를 장착하기 전에 ref에 액세스하고 있지 않은지 확인하십시오.예: 이 동작하지 않습니다.componentWillMount요소가 마운트된 후 ref 관련 콜백을 자..

programing 2023.03.07

이벤트 리스너에서의 잘못된 리액트 후크 동작

이벤트 리스너에서의 잘못된 리액트 후크 동작 리액트 훅을 가지고 놀다가 문제가 생겼어요.이벤트 리스너에 의해 처리되는 버튼을 사용하여 콘솔로그를 실행하려고 하면 잘못된 상태가 표시됩니다. Code Sandbox: https://codesandbox.io/s/lrxw1wr97m 'Add card' 버튼을 두 번 클릭합니다. 첫 번째 카드에서 버튼 1을 클릭하여 콘솔에서 카드가 2개 있는지 확인합니다(올바른 동작). 첫 번째 카드에서 Button 2(이벤트 리스너에 의해 처리됨)를 클릭하여 콘솔에 카드가1개밖에 없는 것을 확인합니다(잘못된 동작). 왜잘 상태 태태 태? ??? 번째 카드에는 '''가 있습니다.Button2를 표시해야 합니다.2카드를 사용할 수 있습니다.은은생 각각? const { useSta..

programing 2023.03.07

setState가 상태를 즉시 업데이트하지 않음

setState가 상태를 즉시 업데이트하지 않음 이 질문에는 이미 답변이 있습니다. react setState 메서드를 호출하면 상태가 즉시 변환되지 않는 이유는 무엇입니까? (9개의 답변) useState set 메서드가 변경을 즉시 반영하지 않습니다. (15개의 답변) 닫힘7개월 전에요. 안 요.onClick ★★★을 바인드 할 가 있다고 합니다. 제가 좀 전에 검색해 봤는데onClick함수는 생성자에 있지만 상태는 여전히 업데이트되지 않습니다. 제 코드는 다음과 같습니다. import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col fr..

programing 2023.02.25

리액트 라우터 v4에서 버튼 클릭을 통해 경로를 탐색하는 방법

리액트 라우터 v4에서 버튼 클릭을 통해 경로를 탐색하는 방법 리액트-라우터-돔에는 다음과 같은 경로가 있습니다. {/* app = home */} 모든 것이 정상적으로 동작하고 있습니다.이제 컴포넌트의 어느 곳에서든 onClick을 사용하여 경로를 변경할 수 있습니다.이 코드는 다음과 같습니다. history.push('/the/path') }> change path 내가 어떻게 그럴 수 있을까?import {withRouter} from 'react-router-dom'; ... class App extends React.Component { ... nextPath(path) { this.props.history.push(path); } render() { return ( this.nextPath('..

programing 2023.02.25
반응형