React의 자식 구성 요소에서 부모 상태 변경 (Redux 없음)

10110

문맥:

나는 내 부서의 역할을 관리하기 위해 vanilla React 및 React Bootstrap ( redux 없음 ) 프로젝트를 진행하고 있습니다. 역할 목록은 실제로 관련이 없지만 상황에 따라 관리자, 관리자, 트레이너 등을 상상해보십시오.

<RoleContainer key={role} role={role} />다음 상태를 가진 부모 구성 요소가 있습니다.

this.state = {
  collapsed: true,
  roleAttributes: [],
  roleMembers: [],
  isLoading: true,
};

내부 에는 테이블 행 을 반복 하고 동적으로 렌더링 하는 to 가 포함 <RoleContainer /><table/>요소가 있습니다 . 따라서 각 역할 구성원에 대해 테이블 ​​행을 얻습니다.roleMembers.maproleMembers

문제 :

<CreateMemberModal role={role} roleAttributes={roleAttributes} />의 하위 구성 요소 인라는 구성 요소가 <RoleContainer />있으며 사용자가 POSTroleMember.

현재 는 DB에 POST새로 추가 roleMember한 다음 페이지를 다시로드하여 변경 사항을 반영해야합니다.

내가 새 사용자 일 자식 내에서 구성 요소 roleMembers상태 속성 을 업데이트하는 redux없이 허용되는 방법 (안티 패턴 또는 나쁜 관행이 아님)이 있습니까?<RoleContainer /><CreateMemberModal />POST

<RoleContainer />전체 페이지를 다시로드하는 대신 새 역할 구성원이있는 항목 만 다시 렌더링 할 수 있습니다.

kiranvj

<RoleContainer />roleMembers를 업데이트하기 위한 메서드 추가

// bind this in constructor 
updateRoleMembers(newRoleMember) {   
   this.setState((prevState)=> {
       return {roleMembers : prevState.roleMembers.concat([newRoleMember])}
   }
}

이제이 메서드를 CreateMemberModal

<CreateMemberModal role={role} roleAttributes={roleAttributes} updateRoleMembers={this.updateRoleMembers} />

새 구성원 역할 세부 사항이있을 때마다 컴포넌트 this.props.updateRoleMembers(NEW ROLE MEMBER)에서 like 호출<CreateMemberModal

이 작업을 수행하는 방법에 대한 문서가 있습니까? 콜백을 제공한다고하면 부모에서 자식에게 소품을 통해 함수를 전달한다는 의미입니까?

여기 에서 반응 문서를 확인 하십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

기능 구성 요소의 부모에서 자식 상태 구성 요소를 변경하는 방법

분류에서Dev

자식에서 부모 구성 요소의 상태를 변경 한 다음 해당 상태를 속성으로 전달하고 자식 구성 요소의 상태를 변경합니다.

분류에서Dev

자식 구성 요소에서 변경된 부모 구성 요소의 상태를 기반으로 부모 구성 요소에서 코드 실행

분류에서Dev

부모의 상태 변경 후 자식 구성 요소 소품이 업데이트되지 않음

분류에서Dev

부모의 상태가 변경된 후 ReactJS 자식 구성 요소가 업데이트되지 않음

분류에서Dev

상태없이 부모에서 전달되는 자식 구성 요소 값을 변경하는 방법

분류에서Dev

React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

분류에서Dev

자식에서 부모 상태 변경 (둘 다 기능 구성 요소 임)

분류에서Dev

React : 부모 상태 변경에 렌더링되지 않는 자식 구성 요소

분류에서Dev

부모의 상태가 변경 될 때 React에서 자식 구성 요소를 업데이트 (다시 렌더링)하는 방법은 무엇입니까?

분류에서Dev

React의 두 번째 자식에서 상태를 트리거하는 버튼이있는 경우 부모 구성 요소에 상태를 전달하는 방법

분류에서Dev

상태의 다른 부분에 연결된 다른 경로에서 react / redux 구성 요소 재사용

분류에서Dev

UseState React Hook을 사용하여 자식 구성 요소에서 부모 구성 요소 상태 업데이트

분류에서Dev

부모에서 자식으로 소품을 전달하고 자식 구성 요소의 상태에 저장할 수 없습니다.

분류에서Dev

반응 : 부모에서 자식 구성 요소 (클래스 구성 요소가 아닌 함수 구성 요소)의 상태를 변경하는 방법은 무엇입니까?

분류에서Dev

자식 구성 요소에서 부모 상태 처리

분류에서Dev

ReactJs에서 부모의 상태를 자식에서 변경

분류에서Dev

자식의 자식에서 부모 구성 요소 상태를 설정하는 방법

분류에서Dev

공급자 구성 요소 부모 상태가 변경 될 때 자식 구성 요소 (반응 컨텍스트 포함)의 값을 업데이트 할 수없는 이유는 무엇입니까?

분류에서Dev

React에서 자식 구성 요소의 상태를 사용하여 부모 구성 요소를 업데이트하는 방법은 무엇입니까?

분류에서Dev

React : 기능 구성 요소의 상태 변경 기능 구성 요소의 props 값과 부모 클래스 상태도 변경

분류에서Dev

부모 클래스에서 자식 구성 요소의 상태에 액세스하는 방법

분류에서Dev

참조를 통해 부모의 상태 비 저장 자식 구성 요소에서 입력 값에 액세스

분류에서Dev

React : 비동기 데이터로 부모에서 자식 구성 요소 상태 업데이트

분류에서Dev

부모 상태 값이 변경되는 경우 자식 구성 요소를 업데이트하는 방법

분류에서Dev

React + Redux : 상태 변경시 구성 요소가 다시 렌더링되지 않음

분류에서Dev

React- 컨테이너 구성 요소 내에 정의 된 함수를 사용하여 자식 구성 요소에서 상태를 변경할 수 없습니다.

분류에서Dev

반응에서 다른 구성 요소의 자식 상태가 변경되면 이벤트 트리거

분류에서Dev

React Hooks (Rendering Arrays)-매핑 된 자식의 참조를 포함하는 부모 구성 요소와 자식 상태를 포함하는 부모 구성 요소

Related 관련 기사

  1. 1

    기능 구성 요소의 부모에서 자식 상태 구성 요소를 변경하는 방법

  2. 2

    자식에서 부모 구성 요소의 상태를 변경 한 다음 해당 상태를 속성으로 전달하고 자식 구성 요소의 상태를 변경합니다.

  3. 3

    자식 구성 요소에서 변경된 부모 구성 요소의 상태를 기반으로 부모 구성 요소에서 코드 실행

  4. 4

    부모의 상태 변경 후 자식 구성 요소 소품이 업데이트되지 않음

  5. 5

    부모의 상태가 변경된 후 ReactJS 자식 구성 요소가 업데이트되지 않음

  6. 6

    상태없이 부모에서 전달되는 자식 구성 요소 값을 변경하는 방법

  7. 7

    React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

  8. 8

    자식에서 부모 상태 변경 (둘 다 기능 구성 요소 임)

  9. 9

    React : 부모 상태 변경에 렌더링되지 않는 자식 구성 요소

  10. 10

    부모의 상태가 변경 될 때 React에서 자식 구성 요소를 업데이트 (다시 렌더링)하는 방법은 무엇입니까?

  11. 11

    React의 두 번째 자식에서 상태를 트리거하는 버튼이있는 경우 부모 구성 요소에 상태를 전달하는 방법

  12. 12

    상태의 다른 부분에 연결된 다른 경로에서 react / redux 구성 요소 재사용

  13. 13

    UseState React Hook을 사용하여 자식 구성 요소에서 부모 구성 요소 상태 업데이트

  14. 14

    부모에서 자식으로 소품을 전달하고 자식 구성 요소의 상태에 저장할 수 없습니다.

  15. 15

    반응 : 부모에서 자식 구성 요소 (클래스 구성 요소가 아닌 함수 구성 요소)의 상태를 변경하는 방법은 무엇입니까?

  16. 16

    자식 구성 요소에서 부모 상태 처리

  17. 17

    ReactJs에서 부모의 상태를 자식에서 변경

  18. 18

    자식의 자식에서 부모 구성 요소 상태를 설정하는 방법

  19. 19

    공급자 구성 요소 부모 상태가 변경 될 때 자식 구성 요소 (반응 컨텍스트 포함)의 값을 업데이트 할 수없는 이유는 무엇입니까?

  20. 20

    React에서 자식 구성 요소의 상태를 사용하여 부모 구성 요소를 업데이트하는 방법은 무엇입니까?

  21. 21

    React : 기능 구성 요소의 상태 변경 기능 구성 요소의 props 값과 부모 클래스 상태도 변경

  22. 22

    부모 클래스에서 자식 구성 요소의 상태에 액세스하는 방법

  23. 23

    참조를 통해 부모의 상태 비 저장 자식 구성 요소에서 입력 값에 액세스

  24. 24

    React : 비동기 데이터로 부모에서 자식 구성 요소 상태 업데이트

  25. 25

    부모 상태 값이 변경되는 경우 자식 구성 요소를 업데이트하는 방법

  26. 26

    React + Redux : 상태 변경시 구성 요소가 다시 렌더링되지 않음

  27. 27

    React- 컨테이너 구성 요소 내에 정의 된 함수를 사용하여 자식 구성 요소에서 상태를 변경할 수 없습니다.

  28. 28

    반응에서 다른 구성 요소의 자식 상태가 변경되면 이벤트 트리거

  29. 29

    React Hooks (Rendering Arrays)-매핑 된 자식의 참조를 포함하는 부모 구성 요소와 자식 상태를 포함하는 부모 구성 요소

뜨겁다태그

보관