Ich habe ein interessantes Problem gefunden. Ich habe eine übergeordnete Komponente mit einem Array von Objekten, das an eine untergeordnete Komponente, die eine TreeView ist, übergeben wird, was bedeutet, dass es rekursiv ist. Ich übergebe eine Funktion und ein paar andere Requisiten an das Kind, zusammen mit dem Array von Objekten, das vom Kind rekursiv behandelt wird. Wenn man die Requisiten in der Renderfunktion des Kinds aufzeichnet, sind beim ersten Rendern alle Requisiten vorhanden, aber wenn sich die rekursive Funktion durch jedes Objekt im Array bewegt, "verliert" es alle anderen Requisiten, die nicht rekursiv behandelt werden.Wie Requisiten Rekursive Kind-Komponente übergeben und alle Requisiten erhalten
Wenn die Komponente macht zuerst die Requisiten Objekt ist: PROP1, prop2, arrayOfObjects
Da es neu macht, wie Rekursion geschieht, widersprechen die Requisiten in das Kind wird: arrayOfObjects.
Prop1 und Prop2 sind verschwunden.
Das Endergebnis ist, dass ich nicht in der Lage bin, eine Funktion im Parent vom Child-Objekt aus aufzurufen. Daher kann ich den Status nicht aktualisieren, je nachdem, auf welchen Knoten in der Struktur geklickt wird. Ich benutze Redux nicht, da dies ein Style Guide ist - getrennt von unserer Produktions-App, der nur für Entwickler gedacht ist, und einfach, wenn es möglich ist, würde ich gerne den ganzen Status innerhalb der Komponenten behandeln.
Es gibt ein anderes Problem - Das Array von Objekten ist die Ordnerstruktur von Dateien in unserem Styleguide, und ich muss in der Lage sein, auf einen Namen in der Liste zu klicken und die Ansicht mit dem Inhalt dieser Datei zu aktualisieren. Dies funktioniert problemlos, wenn die Datei keine untergeordneten Elemente enthält. Wenn es jedoch untergeordnete Knoten gibt und ich auf das übergeordnete Element klicke, wird auf das untergeordnete Element geklickt. Ich habe e.stopPropagation(), e.preventDefault() etc. ausprobiert, hatte aber kein Glück. Danke im Voraus.
Parent:
import React, {Component} from 'react'
import StyleGuideStructure from '../../styleguide_structure.json'
import StyleTree from './style_tree'
class StyleGuide extends Component {
constructor(props) {
super(props)
let tree = StyleGuideStructure
this.state = {
tree: tree
}
Dies ist die Funktion Ich möchte von dem Kind im Wesentlichen Dies ist
setVisibleSection(nodeTitle) {
this.setState({
section: nodeTitle
})
}
render() {
return(
<TreeNode
className="class-name-here"
setVisibleSection={this.setVisibleSection.bind(this)}
node={this.state.tree}
/>
)
}
}
export default StyleGuide
nennen, was ich in dem Kind haben, wie eine Geige hier:
https://jsfiddle.net/ssorallen/XX8mw/
Der einzige Unterschied ist, dass innerhalb der Toggle Fu Ich versuche, setVisibleSection in den Eltern zu nennen, aber keine Würfel. Hier
ist ein Foto von der Konsole der Requisiten zeigt, wenn die Komponente zunächst macht, und dann nach Rekursion:
I das Bild hinzugefügt haben die Requisiten oben zeigt Objekts während Rekursion 'geleert' werden. Ich habe nach der Rekursion keinen Zugriff mehr auf die Funktion setVisibleSection. Die einzige Stütze, die übrig ist, ist die Knotenstütze.Wenn ich die Knoten-Requisiten nicht an das Kind weitergebe, bleiben alle Requisiten intakt. –