codeshow

setState가 즉시 업데이트되지 않음 나는 할 일을 신청하고 있다.이것은 문제를 일으키는 코드의 매우 간단한 버전입니다.체크박스가 있습니다. Writing Item 체크박스를 호출하는 함수는 다음과 같습니다. checkPencil(){ this.setState({ pencil:!this.state.pencil, }); this.props.updateItem(this.state); } updateItem은 디스패치를 위해 redx로 매핑되는 함수입니다. function mapDispatchToProps(dispatch){ return bindActionCreators({ updateItem}, dispatch); } 문제는 업데이트를 호출할 때항목 작업 및 console.log 상태. 항상 1단계 늦습..

외부에서 React 구성 요소 메서드를 호출합니다. React 요소의 인스턴스에서 React 구성요소에 의해 노출된 메서드를 호출합니다. 예를 들어, 이 jsfiddle에서는요.전화하고 싶다alertMessage의 HelloElement★★★★★★ 。 추가 래퍼를 작성하지 않고 이 작업을 수행할 수 있는 방법이 있습니까? 편집(JSFiddle에서 복사된 코드) Click me! var onButtonClick = function () { //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage() console.log("clicked!"); } var Hello = Rea..

반응 + 환원 - 입력에 상태 값이 있을 때 입력 onChange가 매우 느립니다. 가치로 채워진 나의 의견을 내 주로부터 받았다. Settings레독스와의 내 상태야입력에 값을 입력할 때 다음 명령어를 지정해야 합니다.onChange기능.이것은 나의 onChange 함수입니다. handleFlashVarsChange(e) { let { dispatch } = this.props; dispatch( changeFlashVarsValue(e.target.value) ); } 상태 값을 변경합니다.flashVarsValue입력값으로 지정합니다.하지만 입력 입력 시 지연됩니다.입력값을 변경할 때마다 디스패치를 호출해야 하는 이유를 모르겠습니다. 어떻게 하면 렉을 줄일 수 있을까요? 리듀서: import { A..

React의 HashRouter와 BrowserRouter의 차이점은 무엇입니까? 저는 정식 문서를 읽으면 이해하기 어려운 프로그래밍을 처음입니다. 리액트 라우터 4에 대해서 여기서 읽고 있었는데 이 글에서 저자는 다음과 같이 말하고 있었다. ★★★★★★★★★★★★★★★★★」 그는 다음과 같이 말했다. HashRouter는 기본적으로 URL 내의 해시를 사용하여 컴포넌트를 렌더링합니다.저는 한 페이지짜리 고정 웹사이트를 만들고 있었기 때문에, 이것을 사용할 필요가 있었습니다. BrowserRouter는 HTML5 이력 API를 사용하여 컴포넌트를 렌더링합니다.이력은 pushState 및 replaceState를 통해 변경할 수 있습니다.자세한 내용은 이쪽 pushState와 replaceState를 통해..

대응 - TypeScript vs Flow vs. 리액트를 배우고 있는데 잘 알 것 같아요.하지만 강력한 Respect 어플리케이션 개발과 관련하여 한 가지 궁금한 점이 있습니다. 개발자들은 정적 유형 확인을 위해 어떤 툴을 사용하고 있습니까? 저는 TypeScript를 정말 좋아합니다.타입 체크 등 깔끔한 기능으로 JavaScript 어플리케이션 개발의 번거로움을 많이 줄일 수 있다고 생각합니다.Visual Studio Code는 또한 매우 훌륭한 코드 완성도를 제공합니다.그리고 타이핑 + Denifly를 사용하여 React와 연동할 수 있다는 것을 알고 있습니다.입력. 문제는 React + TypeScript 사용에 대한 튜토리얼이 많지 않다는 것입니다.이 조합으로 개발한다는 기사도 별로 없는 것 같..

SVG를 Next.js로 가져올 수 없습니다. SVG 이미지를 Import하려고 하면 다음 오류가 나타납니다.SVG 이미지를 가져오려면 어떤 로더를 사용해야 합니까? ./static/Rolling-1s-200px.svg 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. > SVG Import를 처리할 웹 팩로더를 제공해야 합니다.유명한 로더 중 하나가 svgr입니다. 다음에서 동작하도록 설정하려면 , 다음의 에 를 추가할 필요가 있습니다.next.config.js다음과 같이 로더의 사용 상황을 기록합니다. // next.config.js module.export..

개미 디자인 - 막대한 수입품 리액션 어플리케이션으로 개미 디자인 라이브러리를 사용하고 있습니다. 게다가 대량의 Import에 직면하고 있기 때문에, 번들에 악영향을 주고 있습니다(개미 디자인 lib로 인해 현재 미니버전의 1.1 MB). 모든 앱에서 antd 컴포넌트를 다르게 Import하려면 어떻게 해야 합니까? 갱신: 보이다antd에는 대형 모듈 또는 최적화되지 않은 모듈이 몇 개 있습니다.여기서 중요한 것은 Datepicker 모듈을 Import하는 것뿐입니다.boom! + 거의 2MB (dev 번들 of c) UPD: 새로운 (4.0) 버전의 antd에서는 근본적인 문제가 해결된 것 같습니다. 따라서 이전 버전에서 이 문제를 해결하려면 antd 4로 마이그레이션하는 것이 좋습니다. 이전 답변: ..

스냅샷을 생성할 때 Jest/Enzym ShowlowWrapper가 비어 있습니다. 그래서 나는 아이템 컴포넌트에 대한 테스트를 쓰고 있는데, 나는 그 컴포넌트를 렌더링하려고 했다.ItemCard컴포넌트를 사용하여 스냅샷을 생성하지만 빈 컴포넌트가 반환됩니다.ShallowWrapper {} 자세한 내용은 다음 코드를 참조하십시오. Item.test.js import { shallow } from 'enzyme'; import { ItemCard } from '../Item'; const fakeItem = { id: 'aksnfj23', title: 'Fake Coat', price: '40000', description: 'This is suuuper fake...', image: 'fakecoat.j..

ng-if in react.js에 해당하는 것은 무엇입니까? 저는 각도를 사용하여 반응하게 되었습니다. 그리고 조건에 따라 요소를 렌더링하거나 렌더링하지 않는 각도 ng-if 지시어의 좋은 반응 방법을 찾고 있습니다.이 코드를 예로 들어 보겠습니다.저는 (tsx) btw를 사용하고 있습니다만, 그건 별로 문제가 되지 않습니다. "use strict"; import * as React from 'react'; interface MyProps {showMe: Boolean} interface MyState {} class Button extends React.Component { constructor(props){ super(props); this.state = {}; } render(){ let butto..

onFocus 및 onBlur가 반응으로 렌더링되지 않음 다음과 같은 코드를 가지고 있습니다. Calendar ; 입력 태그에서는 디폴트로 플레이스 홀더 텍스트를 입력 필드에 표시하려고 합니다.클릭하면 날짜로 유형을 변경해 주셨으면 합니다.그리고 Chrome에서 inspect 요소를 클릭했을 때 문제가 있는 것 같습니다.그것은 보이지 않을 것이다onFocus그리고.onBlur. P/S: 심지어onClick같은 문제를 안고 있는 것 같다이것이 당신이 찾고 있던 것이에요? http://codepen.io/comakai/pen/WvzRKp?editors=001 var Foo = React.createClass({ getInitialState: function () { return { type: 'text' }..