madecode

react.display의 하위 구성요소를 재귀적으로 렌더링하는 방법 자체 컴포넌트 내에서 반응 컴포넌트를 재귀적으로 추가하려고 했습니다.이 트리 컴포넌트의 예는 하위 Tree Nodes를 통해 매핑하고 하위 노드를 추가하는 것과 같습니다.유감스럽게도 저는 전혀 효과가 없습니다.단순한 코멘트 컴포넌트를 가지면 응답은 같은 컴포넌트를 재사용할 수 있습니다. var Comment = React.createClass({ render: function() { return ( {/* text and author */} {this.props.author} {/* replies */} { this.props.replies.map(function(reply) { }.bind(this)) } ); } }); 다음의 에러..

React.js는 어레이를 통해 루프를 생성합니다. 10인용 테이블을 표시하려고 합니다.저는 에이잭스를 통해 데이터를 받아 소품으로 제 아이에게 전달합니다. var CurrentGame = React.createClass({ // get game info loadGameData: function() { $.ajax({ url: '/example.json', dataType: 'json', success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error('#GET Error', status, err.toString()); }.bind(this) }); }, g..

리액트 훅 - 변수와 useState 사용 React Hooks에는 useState 옵션이 있으며 Hooks와 Class-State의 비교가 항상 표시됩니다.하지만 Hooks와 몇 가지 규칙적인 변수는 어떻습니까? 예를들면, function Foo() { let a = 0; a = 1; return {a}; } Hooks를 사용하지 않았으며 다음과 같은 결과를 얻을 수 있습니다. function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return {a}; } 그럼 뭐가 다른데?이 경우 Hooks를 더 복잡하게 사용하면...그럼 왜 이걸 사용하기 시작했죠?그 이유는 당신이useState시야가 ..

미발견 오류: 예상보다 적은 수의 후크가 렌더링되었습니다.리액트 훅의 우발적인 조기 반환 문구가 원인일 수 있습니다. 다음 컴포넌트에서 에이징 셀렉터를 누르고 값을 15로 변경하여 운전면허 필드 없이 폼을 렌더링하면 오류가 나타납니다. Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. at invariant (react-dom.development.js:55) at finishHooks (react-dom.development.js:11581) at updateFunctionComponent (react-dom.development.js:14262) at ..

React를 사용하여 현재 전체 URL을 읽으시겠습니까? React 내에서 전체 URL을 가져오려면 어떻게 해야 합니까?JS 컴포넌트? 는 이런 으로 해야 this.props.location 그것은 .undefinedwindow.location.href네가 찾고 있는 거야 URL의 전체 경로가 필요한 경우 vanilla Javascript를 사용할 수 있습니다. window.location.href 패스(도메인명 제외)만을 취득하려면 , 다음의 순서를 사용합니다. window.location.pathname console.log(window.location.pathname); //yields: "/js" (where snippets run) console.log(window.location.href); ..

react+enzyme을 사용하여 요소 텍스트를 선택하는 방법 딱 그렇게 써있네요.코드 예시: let wrapper = shallow(OK); const b = wrapper.find('.btn'); expect(b.text()).to.be.eql('OK'); // fail 또,htmlmethod는 요소의 내용뿐만 아니라 요소 자체와 모든 속성을 반환합니다(예:OK그럼 최악의 경우엔 전화할 수 있겠네요html다시 만들긴 하지만... 내가 단언할 수 있도록 요소의 내용을 얻을 수 있는 방법은 없을까?"텍스트 포함"을 검색하다가 이 항목을 발견한 경우 다음을 시도해 보십시오. it('should show correct text', () => { const wrapper = shallow(); expect(w..

reactjs의 컨텍스트 API를 통해 상태를 관리하려면 useMemo가 필요합니까? react의 컨텍스트 API를 사용하여 응용 프로그램 수준 상태를 관리하는 방법을 설명하는 이 문서를 이해하려고 합니다.단순한 애플리케이션(이 경우는 기본적인 카운터 애플리케이션)의 경우, 다음의 솔루션을 사용합니다. const CountContext = React.createContext() function CountProvider(props) { const [count, setCount] = React.useState(0) const value = React.useMemo(() => [count, setCount], [count]) return } 콘텍스트를 제공하고 컴포넌트 트리 하단의 컴포넌트에서 사용할 수 있는..

대응: 외부 html 파일을 로드 및 렌더링하는 방법 React와 Redux를 사용하여 작은 블로그 앱을 만들고 있습니다.블로그에는 투고 제목, 작성자, 태그 및 설명이 포함된 투고 페이지가 표시됩니다.제목이나 "자세히 읽기" 버튼을 클릭할 때 로컬 프로젝트의 데이터 폴더에서 해당 게시물이 있는 HTML 파일을 모든 게시물과 함께 로드하여 렌더링하고 싶습니다. Redx는 블로그 상태를 관리하고 데이터 폴더 내의 대응하는html 파일을 포함한 8개의 다른 투고와 함께 첫 번째 posts.json 파일을 로드합니다.제가 보기엔 당신은 여기서 해결해야 할 문제가 두 가지 있습니다.는 '어느 정도'를이고,innerHTML리액트 내 요소 중 하나입니다.다른 하나는 주어진 변수(현재 경로, 텍스트 필드 입력 등)에..

렌더링 방법에서 null을 반환하는 반응 성분 Jest 효소 검정 특정 조건에서 렌더에서 null을 반환하는 구성 요소가 있습니다. render() { if (this.props.isHidden) { return null; } return test; } isHidden이 joke 및 효소와 함께 true일 때 구성요소가 null인지 확인합니다. describe('myComp', () => { it('should not render if isHidden is true', () => { const comp = shallow(); expect(comp.children().length).toBe(0); }); }); 이것은 효과가 있지만 이 시험을 쓸 수 있는 좀 더 관용적인 방법이 있을까요?null로 표시되는..

'시작' 시 tsconfig.json이 덮어쓰지 않도록 react-script를 구성하는 방법 현재 사용하고 있습니다.create-react-app에 의해 생성된 create-context-app은 tsconfig.json을 사용합니다.tsconfig.json은 tsconfig.json을 사용합니다. "baseUrl": "./src", "paths": { "interfaces/*": [ "common/interfaces/*", ], "components/*": [ "common/components/*", ], }, 매번 달리기를 할 yarn start으로 운영됩니다.react-scripts start변경 내용이 삭제되고 기본 설정이 다시 생성됩니다. create-react-app에 커스텀 설정을 사용하도..