goodjava

상태 배열의 항목을 편집하는 방법 제 상태는 다음과 같습니다. this.state = { ids: ['A', 'E', 'C'] }; 인덱스 1의 E를 B로 바꾸려면 상태를 어떻게 수정해야 합니까?예를 들어 다음과 같습니다. this.setState({ ids[1]: 'B' }); 어떻게 해야 할까요?내부 상태 개체를 수정하지 않도록 불변 연산을 사용하는 데 익숙해지는 것이 좋습니다. 리액트 문서에서 지적된 바와 같이: 나중에 setState()를 호출하면 변환이 대체될 수 있으므로 this.state를 직접 변환하지 마십시오.이 .state는 불변의 것으로 간주합니다. 이 경우 [1]을 사용하여 어레이의 새 복사본을 가져오고 [2] 복사본을 조작한 다음 [3] setState를 새 어레이와 함께 사용할 ..

React를 사용하여 구성 파일을 저장하고 읽는 방법 react.js는 처음입니다.서버에서 데이터를 가져와 다음과 같이 사용하는 컴포넌트를 구현했습니다. CallEnterprise:function(TenantId){ fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) { EnterprisePerspectiveActions.getEnterprise(enterprises); }).catch(function() { alert("There was some issue in API Call please contact Admin"); //ComponentAppDispa..

JSX에서 공백을 추가할 때의 모범 사례 JSX에 공백을 추가하는 방법(그리고 그 이유)은 알고 있습니다만, 베스트 프랙티스가 무엇인지, 실제적인 차이가 있는지 궁금합니다. 두 요소를 모두 스팬으로 감습니다. Hello World! 한 줄에 추가 Hello World! JS를 사용하여 공간 추가 Hello {" "} World! 왜냐면&nbsp에서는 공백이 없어집니다.필요한 경우에만 사용하십시오.대부분의 경우, 이것은 의도하지 않은 부작용을 일으킬 것이다. 이전 버전의 React는 v14보다 이전 버전에서는 모두 자동으로 삽입됩니다. 태그 안에 새 줄이 생겼을 때요 고객이 더 이상 이렇게 하지 않지만, 고객 고유의 코드로 처리하는 것이 안전합니다.특별히 타겟팅하는 스타일링이 없는 한span(일반적으로 나..

새로운 React Context API는 재렌더를 트리거합니까? 나는 새로운 React Context API를 이해하려고 노력했고 그것을 가지고 놀고 있었다.간단한 사례를 확인하려고 합니다. 프로바이더에 대한 데이터가 업데이트되면 모든 것이 재렌더됩니다. Codesandbox에서 이 작은 예를 확인합니다. 이 예에서는,Appcomponent - 다음과 같은 상태를 가진 컴포넌트 - this.state = { number - A random number text - A static text } 여기서부터 다음을 포함하는 새로운 리액트 컨텍스트를 만듭니다.number그리고.text주(州)에서 두 소비자에게 값을 전달합니다.Number그리고.Text. 따라서 랜덤 번호가 갱신되면 콘텍스트가 변경되어 양쪽 컴포..

컴포넌트의 Reactjs 비동기 렌더링 ajax 요청이 완료된 후 컴포넌트를 렌더링하고 싶습니다. 아래에 내 코드가 표시됩니다. var CategoriesSetup = React.createClass({ render: function(){ var rows = []; $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) { $.each(data, function(index, element){ rows.push(); }); return ({rows}) }) } }); 그러나 나는 나의 ajax 요청의 done 메서드로 렌더링을 반환하기 때문에 아래 오류가 발생합니다. Uncaught Error: Invariant Violatio..

Redx 상태 및 URL 해시 태그 매개 변수를 동기화하는 방법 사용자가 선택/해제할 수 있는 강의와 챕터 목록이 있습니다.2개의 리스트는 레독스스토어에 저장됩니다.이제 선택한 강의 슬래그와 챕터 슬래그의 표현을 URL 해시 태그에 유지하고 URL을 변경하면 스토어도 변경됩니다(양방향 동기화). react-router 또는 react-router-redux를 사용하는 가장 좋은 솔루션은 무엇입니까? 리액트 라우터가 URL의 해시 태그를 유지하기 위해서만 사용되고 컴포넌트가 1개만 갱신되는 좋은 예를 찾을 수 없었습니다.그럴 필요 없을 것 같아요. (답변을 무시해서 죄송하지만 제 경험상 가장 좋은 해결책입니다.) Store는 데이터에 대한 진실의 원천입니다.이거 괜찮네요. 리액트 라우터를 사용하는 경우는,..

React의 동적 속성JS 버튼 요소에 비활성화된 속성을 동적으로 포함/제외합니다.동적 속성 값의 예는 많이 보았지만 속성 자체의 예는 보지 못했습니다.다음과 같은 렌더링 기능이 있습니다. render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return Clear cart } 이 경우 "{" 문자로 인해 구문 분석 오류가 발생합니다.AppStore.cartIsEmpty()의 (부울) 결과에 따라 비활성화된 속성을 포함하거나 생략하려면 어떻게 해야 합니까?옵션 Atribute를 추가하는 가장 깨끗한 방법(다음 포함)disabled기타)는 현재 JSX 스프레드 속성을 사용하고 있습니다. var Hello = Re..

Typescript | 함수의 반환 유형 누락에 대한 경고(ESLint 나는 가지고 있다REACT-STATELESS-COMPONENT, TypeScript를 사용하는 프로젝트에서 사용합니다.라고 하는 것은 잘못이다 Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type) 나는 내가 무엇을 하기를 원하는지 잘 모르겠다.코드는 다음과 같습니다. import React, { Fragment} from 'react'; import IProp from 'dto/IProp'; export interface Props { prop?: IProp; } const Component = ({ prop }: Props & ..

'toBeInTheDocument' 속성이 'Matchers' 유형에 없습니다. API 등을 이용하여 애견 쉼터용 UI를 만드는 간단한 리액트 앱에 대한 테스트를 작성하려고 합니다.아래 표시된 모듈을 Import하여 다음 명령을 실행했습니다. npm install jest-dom react-testing-library --save-dev 하지만, 나는 미래에 대해In The Document(). 빨간색으로 밑줄이 그어진 메서드와 오류 메시지 "Property 'toBeInTheDocument' does not exist on type 'Matchers'." import "react-testing-library/cleanup-after-each"; import "jest-dom/extend-expect";..

FormControl은 무엇에 사용됩니까?왜 쓰이죠?사용방법 FormControl이 어떤 기능을 제공하는지, 왜/어떻게 사용하고자 하는지 설명해 주실 수 있습니까? React에서 Material-UI를 사용하고 있는데, FormControl을 사용하는 폼의 예가 많지만 FormControl의 기능과 프로젝트에 필요한지를 이해하는 데 어려움을 겪고 있습니다. 현재 Form.js라는 이름의 컴포넌트가 있으며 다음과 같은 div에 모든 폼 요소가 포함되어 있습니다. return ( Account ( { selected.map(value => ( ))} )} MenuProps={MenuProps} > {accountNames.map(name => ( {name.label} ))} ); } 이것으로 괜찮습니까?아..