ReactJS에서 컴포넌트에 상태를 전달할 수 있다는 것을 알고 있습니다.
부모 jsx :
<Display active={this.state.dispActive} />
그리고 다음과 같이 자식 jsx 렌더링에서 사용하십시오 (예제).
<div>Display: {this.props.active ? 'Active' : 'Inactive'}</div>
그러나 이것을 아이의 상태로 두려고하면 작동하지 않습니다.
state = {
isActive: this.props.active
}
아마도 상태는 생성자에서 한 번 초기화 된 다음 변경되지 않습니다.
소품의 상태가 변경 될 때 여기에서 자식에서 함수를 호출하고 싶습니다. 내가 찾은 유일한 방법은 모든 자녀의 코드를 부모에 포함시킨 다음 코드의 결과로 상태를 전달하는 것입니다.
부모의:
handleDisplayChange = (e) => {
//Code here then use this.setState to change parent's this.state
//which then reflects on the passed props in the child
}
그러나 아이가없는 논리적 부모에 속해 내가 그 개체의 특정 속성 세트 말할 수 원하는 도서관의 일종 포함 어떤 경우 자녀의를 ?
this.display = new Display();
this.display.setActive = this.state.isActive
this.display는 자식에서 구성됩니다. 부모의 맥락에 속하지 않습니다. 난 필요해
parent는 하나의 jsx 생성자에 디스플레이를 배치하고 다른 하나에는 버튼 툴바를 배치해야하므로 Parent.jsx에 속하지 않습니다.
<div className="App">
<Toggle toggleState={this.toggleState} active={this.state.dispActive}/>
<Display active={this.state.dispActive} />
</div>
편집 : 잘못된 코드를 붙여넣고 더 이해하기 쉽게 편집했습니다.
상태 변경시 자식에서 함수를 호출해야합니다.
이를 위해 shouldComponentUpdate기능을 사용할 수 있습니다 . 이 함수 안에서 소품이나 상태가 변경되었는지 확인할 수 있습니다. 둘 중 하나라도 변경 한 경우, 당신은 당신이에서 자식 요소에서 호출 할 기능을 어떤 호출 할 수있는 shouldComponentUpdate기능
예
함수 foo가 상태 또는 소품이 변경 될 때 자식 구성 요소에서 호출해야하는 함수라고 가정합니다 . foo하위 구성 요소 내부에 함수를 정의한 다음 shouldComponentUpdate이 하위 구성 요소 내부 에도 함수 를 정의 합니다.
class Child extends Component {
state = {
isActive: this.props.active
};
foo() {
console.log('function called when state or props change');
}
shouldComponentUpdate(nextProps, nextState) {
if (
this.props.isActive != nextProps.active ||
this.state.isActive != nextState.isActive
) {
this.foo(); // call function on state or props change
return true;
}
return false;
}
render() {
return <p>{this.state.isActive ? 'active' : 'not active'}</p>
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다