문맥:
나는 내 부서의 역할을 관리하기 위해 vanilla React 및 React Bootstrap ( redux 없음 ) 프로젝트를 진행하고 있습니다. 역할 목록은 실제로 관련이 없지만 상황에 따라 관리자, 관리자, 트레이너 등을 상상해보십시오.
<RoleContainer key={role} role={role} />
다음 상태를 가진 부모 구성 요소가 있습니다.
this.state = {
collapsed: true,
roleAttributes: [],
roleMembers: [],
isLoading: true,
};
내부 에는 테이블 행 을 반복 하고 동적으로 렌더링 하는 to 가 포함 <RoleContainer />
된 <table/>
요소가 있습니다 . 따라서 각 역할 구성원에 대해 테이블 행을 얻습니다.roleMembers.map
roleMembers
문제 :
<CreateMemberModal role={role} roleAttributes={roleAttributes} />
의 하위 구성 요소 인라는 구성 요소가 <RoleContainer />
있으며 사용자가 POST
새 roleMember
.
현재 는 DB에 POST
새로 추가 roleMember
한 다음 페이지를 다시로드하여 변경 사항을 반영해야합니다.
내가 새 사용자 일 때 자식 내에서 구성 요소 의 roleMembers
상태 속성 을 업데이트하는 redux없이 허용되는 방법 (안티 패턴 또는 나쁜 관행이 아님)이 있습니까?<RoleContainer />
<CreateMemberModal />
POST
<RoleContainer />
전체 페이지를 다시로드하는 대신 새 역할 구성원이있는 항목 만 다시 렌더링 할 수 있습니다.
<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] 삭제
몇 마디 만하겠습니다