2017-02-14 12 views
0

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: enter image description here

+0

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. –

Antwort

1

Ich glaube nicht wirklich, dass ich Ihre zweite Frage verstehen. Könntest du eine Geige schreiben, die das Problem zeigt?

Ich denke, Ihr erstes Problem ist, dass Sie die Requisiten an die Kinder weitergeben müssen. Ich habe versucht, dein Beispiel auf deine Geige zu übertragen. Sie können sehen, indem Sie auf die Knoten klicken, der Titel wechselte zum Namen des Knotens.

https://jsfiddle.net/hbjjq3zj/

/** 
 
* Using React 15.3.0 
 
* 
 
* - 2016-08-12: Update to React 15.3.0, class syntax 
 
* - 2016-02-16: Update to React 0.14.7, ReactDOM, Babel 
 
* - 2015-04-28: Update to React 0.13.6 
 
*/ 
 

 
class TreeNode extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    \t visible: true, 
 
    }; 
 
    } 
 
    
 
    toggle =() => { 
 
    this.setState({visible: !this.state.visible}); 
 
    this.props.setVisibleSection(this.props.node.title) 
 
    }; 
 
    
 
    render() { 
 
    \t var childNodes; 
 
    var classObj; 
 

 
    if (this.props.node.childNodes != null) { 
 
     childNodes = this.props.node.childNodes.map((node, index) => { 
 
     return <li key={index}><TreeNode {...this.props} node={node} /></li> 
 
     }); 
 

 
     classObj = { 
 
     togglable: true, 
 
     "togglable-down": this.state.visible, 
 
     "togglable-up": !this.state.visible 
 
     }; 
 
    } 
 

 
    var style; 
 
    if (!this.state.visible) { 
 
     style = {display: "none"}; 
 
    } 
 

 
    return (
 
     <div> 
 
     <h5 onClick={this.toggle} className={classNames(classObj)}> 
 
      {this.props.node.title} 
 
     </h5> 
 
     <ul style={style}> 
 
      {childNodes} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class ParentComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    \t visible: true, 
 
    }; 
 
    } 
 
    
 
    toggle =() => { 
 
    this.setState({visible: !this.state.visible}); 
 
    }; 
 
    setVisibleSection(nodeTitle) { 
 
    this.setState({ 
 
     title: nodeTitle 
 
    }) 
 
    } 
 
    render() { 
 
    return (
 
    \t <div> 
 
     \t Title: {this.state.title} 
 
     \t <TreeNode 
 
     \t node={tree} 
 
      setVisibleSection={this.setVisibleSection.bind(this)} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 

 

 
var tree = { 
 
    title: "howdy", 
 
    childNodes: [ 
 
    {title: "bobby"}, 
 
    {title: "suzie", childNodes: [ 
 
     {title: "puppy", childNodes: [ 
 
     {title: "dog house"} 
 
     ]}, 
 
     {title: "cherry tree"} 
 
    ]} 
 
    ] 
 
}; 
 

 
ReactDOM.render(
 
    <ParentComponent />, 
 
    document.getElementById("tree") 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

+0

Danke, dass Sie sich das angesehen haben. In der Beschreibung gebe ich die Requisiten an die Kinder weiter. Ich versuche, diese SetVisibleSection-Funktion an das Kind als Prop zu übergeben. Aus irgendeinem Grund wird es durch die Rekursion ausgelöscht. Es funktioniert in dem Beispiel hier, aber in der Konsole auf meinem Computer kann ich das Objekt ändern sehen. Was es beim ersten Rendern ist, ist nicht das, was es macht, wenn es rekursiv ist. Ich werde ein Foto posten. Bizarr. –

+0

Ich sehe, dass Sie alle Requisiten an die untergeordnete Komponente übergeben haben, die rekursiv ist. Das löst das Problem. Ich gab sie an das Kind weiter, aber nicht an den Hinweis des Kindes auf sich selbst in der Karte. Vielen Dank! –

Verwandte Themen