여기에 제시된 솔루션에 만족하지 않았습니다. 실제로 기본 props 객체 이외의 일부 React 기능에 의존하지 않고 순수 Javascript를 사용하여 수행 할 수있는 매우 간단한 솔루션이 있으며, 어느 방향 (부모-> 자식, 자식-> 부모)으로 통신하는 이점을 제공합니다. 부모 구성 요소에서 자식 구성 요소로 개체를 전달해야합니다. 이 개체는 "양방향 참조"또는 biRef라고합니다. 기본적으로 개체에는 부모가 노출하려는 부모의 메서드에 대한 참조가 포함됩니다. 자식 구성 요소는 부모가 호출 할 수있는 개체에 메서드를 연결합니다. 이 같은:
// Parent component.
function MyParentComponent(props) {
function someParentFunction() {
// The child component can call this function.
}
function onButtonClick() {
// Call the function inside the child component.
biRef.someChildFunction();
}
// Add all the functions here that the child can call.
var biRef = {
someParentFunction: someParentFunction
}
return <div>
<MyChildComponent biRef={biRef} />
<Button onClick={onButtonClick} />
</div>;
}
// Child component
function MyChildComponent(props) {
function someChildFunction() {
// The parent component can call this function.
}
function onButtonClick() {
// Call the parent function.
props.biRef.someParentFunction();
}
// Add all the child functions to props.biRef that you want the parent
// to be able to call.
props.biRef.someChildFunction = someChildFunction;
return <div>
<Button onClick={onButtonClick} />
</div>;
}
이 솔루션의 다른 장점은 단일 속성 만 사용하여 부모에서 자식으로 전달하는 동안 부모와 자식에 더 많은 기능을 추가 할 수 있다는 것입니다.
위 코드를 개선하면 부모 함수와 자식 함수를 biRef 개체에 직접 추가하는 것이 아니라 하위 멤버에 추가하는 것입니다. 부모 함수는 "parent"라는 멤버에 추가되어야하고 자식 함수는 "child"라는 멤버에 추가되어야합니다.
// Parent component.
function MyParentComponent(props) {
function someParentFunction() {
// The child component can call this function.
}
function onButtonClick() {
// Call the function inside the child component.
biRef.child.someChildFunction();
}
// Add all the functions here that the child can call.
var biRef = {
parent: {
someParentFunction: someParentFunction
}
}
return <div>
<MyChildComponent biRef={biRef} />
<Button onClick={onButtonClick} />
</div>;
}
// Child component
function MyChildComponent(props) {
function someChildFunction() {
// The parent component can call this function.
}
function onButtonClick() {
// Call the parent function.
props.biRef.parent.someParentFunction();
}
// Add all the child functions to props.biRef that you want the parent
// to be able to call.
props.biRef {
child: {
someChildFunction: someChildFunction
}
}
return <div>
<Button onClick={onButtonClick} />
</div>;
}
부모 함수와 자식 함수를 biRef 개체의 개별 멤버에 배치하면 둘 사이를 명확하게 분리 할 수 있으며 부모 또는 자식에 속하는 함수를 쉽게 확인할 수 있습니다. 또한 동일한 기능이 둘 다에 나타나는 경우 하위 구성 요소가 실수로 상위 기능을 겹쳐 쓰는 것을 방지합니다.
마지막으로 부모 구성 요소는 var를 사용하여 biRef 개체를 만드는 반면 자식 구성 요소는 props 개체를 통해 액세스합니다. 부모에서 biRef 객체를 정의하지 않고 자체 props 매개 변수 (UI 요소의 계층 구조에 해당)를 통해 부모로부터 액세스하려는 유혹이있을 수 있습니다. 자식이 부모에게 호출하는 함수가 실제로 조부모에게 속할 수있을 때 부모에게 속한 함수라고 생각할 수 있기 때문에 위험합니다. 당신이 알고있는 한 이것에 아무런 문제가 없습니다. 부모 / 자식 관계 이외의 일부 계층 구조를 지원할 이유가없는 경우 부모 구성 요소에서 biRef를 만드는 것이 가장 좋습니다.