Ich war mit keiner der hier vorgestellten Lösungen zufrieden. Es gibt tatsächlich eine sehr einfache Lösung, die mit reinem Javascript durchgeführt werden kann, ohne auf andere React-Funktionen als das grundlegende Requisitenobjekt angewiesen zu sein - und die Ihnen den Vorteil bietet, in beide Richtungen zu kommunizieren (Eltern -> Kind, Kind -> Eltern). Sie müssen ein Objekt von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Dieses Objekt ist das, was ich als "bidirektionale Referenz" oder kurz biRef bezeichne. Grundsätzlich enthält das Objekt einen Verweis auf Methoden im übergeordneten Objekt, die das übergeordnete Objekt verfügbar machen möchte. Die untergeordnete Komponente hängt Methoden an das Objekt an, das die übergeordnete Komponente aufrufen kann. Etwas wie das:
// 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>;
}
Der andere Vorteil dieser Lösung besteht darin, dass Sie dem übergeordneten und dem untergeordneten Element viel mehr Funktionen hinzufügen können, während Sie diese mit nur einer einzigen Eigenschaft vom übergeordneten Element an das untergeordnete Element übergeben.
Eine Verbesserung gegenüber dem obigen Code besteht darin, die übergeordneten und untergeordneten Funktionen nicht direkt zum biRef-Objekt, sondern zu Untermitgliedern hinzuzufügen. Übergeordnete Funktionen sollten einem Mitglied namens "parent" hinzugefügt werden, während die untergeordneten Funktionen einem Mitglied namens "child" hinzugefügt werden sollten.
// 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>;
}
Wenn Sie übergeordnete und untergeordnete Funktionen in separate Elemente des biRef-Objekts einfügen, haben Sie eine saubere Trennung zwischen den beiden und können leicht erkennen, welche zu Eltern oder untergeordneten Elementen gehören. Es hilft auch zu verhindern, dass eine untergeordnete Komponente versehentlich eine übergeordnete Funktion überschreibt, wenn in beiden dieselbe Funktion angezeigt wird.
Eine letzte Sache ist, dass, wenn Sie bemerken, die übergeordnete Komponente das biRef-Objekt mit var erstellt, während die untergeordnete Komponente über das Requisitenobjekt darauf zugreift. Es könnte verlockend sein, das biRef-Objekt im übergeordneten Objekt nicht zu definieren und von seinem übergeordneten Objekt über seinen eigenen Requisitenparameter darauf zuzugreifen (was in einer Hierarchie von UI-Elementen der Fall sein kann). Dies ist riskant, da das Kind möglicherweise denkt, dass eine Funktion, die es dem Elternteil aufruft, dem Elternteil gehört, wenn es tatsächlich einem Großelternteil gehört. Daran ist nichts auszusetzen, solange Sie sich dessen bewusst sind. Sofern Sie keinen Grund haben, eine Hierarchie über eine Eltern-Kind-Beziehung hinaus zu unterstützen, ist es am besten, das biRef in Ihrer übergeordneten Komponente zu erstellen.