React
구성 요소 간의 통신
수색…
비고
React 구성 요소 간에는 총 3 가지의 통신이 있습니다.
- 사례 1 : 부모와 자녀 간의 의사 소통
- 사례 2 : 부모와의 의사 소통
- 사례 3 : 관련이없는 구성 요소 (모든 구성 요소와 구성 요소) 통신
부모 컴포넌트와 자식 컴포넌트
React 세계에서 가장 자연스러운 사례, 실제로는 자연스러운 것입니다. 이미 이미 사용하고 있습니다.
자식 구성 요소에 소품 을 전달할 수 있습니다. 이 예제 message
는 하위 구성 요소로 전달하는 소품이고 이름 메시지는 임의로 선택되며 원하는 이름을 지정할 수 있습니다.
import React from 'react';
class Parent extends React.Component {
render() {
const variable = 5;
return (
<div>
<Child message="message for child" />
<Child message={variable} />
</div>
);
}
}
class Child extends React.Component {
render() {
return <h1>{this.props.message}</h1>
}
}
export default Parent;
여기서, <Parent />
요소는 두 렌더링 <Child />
전달 요소를 message for child
첫 번째 구성 요소의 내부 및 5
번째 내부.
요약하면 다른 요소 (자식)를 렌더링하고 일부 소품을 전달하는 구성 요소 (부모)가 있습니다.
하위 컴포넌트와 상위 컴포넌트
데이터를 부모에게 다시 보내면 부모 컴포넌트에서 자식 컴포넌트로 함수를 전달 하고 자식 컴포넌트는 그 함수를 호출합니다 .
이 예제에서는 하위 구성 요소에 함수를 전달하고 하위 구성 요소 내에서 해당 함수를 호출하여 상위 상태를 변경합니다.
import React from 'react';
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.outputEvent = this.outputEvent.bind(this);
}
outputEvent(event) {
// the event context comes from the Child
this.setState({ count: this.state.count++ });
}
render() {
const variable = 5;
return (
<div>
Count: { this.state.count }
<Child clickHandler={this.outputEvent} />
</div>
);
}
}
class Child extends React.Component {
render() {
return (
<button onClick={this.props.clickHandler}>
Add One More
</button>
);
}
}
export default Parent;
Parent의 outputEvent
메소드 (부모 상태를 변경)는 Child의 button onClick
이벤트에 의해 호출됩니다.
관련없는 구성 요소
구성 요소에 부모 - 자식 관계가 없거나 (예 : 그랜드 그랜드 아들과 관련이 있지만) 유일한 구성 요소는 한 구성 요소가 구독하고 다른 구성 요소가 씁니다.
이들은 모든 이벤트 시스템의 2 가지 기본 작동 : 알림을받을 이벤트 구독 및 청취 , 원하는 이벤트를 알리기 위해 이벤트 보내기 / 트리거 / 게시 / 디스패치 .
적어도 3 가지 패턴이 있습니다. 여기 에서 비교 를 찾을 수 있습니다.
다음은 간략한 요약입니다.
패턴 1 : Event Emitter / Target / Dispatcher : 청취자는 소스를 참조하여 구독해야합니다.
- subscribe :
otherObject.addEventListener('click', () => { alert('click!'); });
- 디스패치 :
this.dispatchEvent('click');
- subscribe :
패턴 2 : 게시 / 구독 : 이벤트를 트리거하는 소스에 대한 특정 참조가 필요하지 않은 경우 모든 이벤트를 처리하는 전역 개체에 액세스 할 수 있습니다.
- 구독하려면 :
globalBroadcaster.subscribe('click', () => { alert('click!'); });
- 파견 :
globalBroadcaster.publish('click');
- 구독하려면 :
패턴 3 : 신호 : Event Emitter / Target / Dispatcher와 비슷하지만 임의의 문자열은 여기에서 사용하지 마십시오. 이벤트를 방출 할 수있는 각 오브젝트에는 해당 이름의 특정 특성이 있어야합니다. 이 방법을 사용하면 개체에서 발생할 수있는 이벤트를 정확히 알 수 있습니다.
- subscribe :
otherObject.clicked.add( () => { alert('click'); });
- 파견 할 :
this.clicked.dispatch();
- subscribe :