再帰的子コンポーネントに小道具を渡してすべての小道具を保存する方法

Question

興味深い問題が発生しました。私はツリービューである子コンポーネントに渡されるオブジェクトの配列を持つ親コンポーネントを持っています。つまり、再帰的です。私は関数を渡していますし、子にいくつかの他の小道具と、子供が再帰的に扱うオブジェクトの配列を渡しています。子のレンダリング関数にプロップを記録すると、最初のレンダリングですべての小道具がそこにありますが、再帰関数が配列内の各オブジェクトを移動すると、再帰的に処理されない他のすべての小道具が失われます。コンポーネントは、最初の小道具オブジェクトをレンダリング

は：PROP1、PROP2、arrayOfObjects

それは再帰が起こっているように、レンダリング再として、小道具子内のオブジェクトは次のようになるarrayOfObjects。

prop1およびprop2が消失した。

最終的には、子から親の関数を呼び出すことができないため、ツリーのどのノードがクリックされたかによって状態を更新できません。私はreduxを使用していません。これはスタイルガイドです - 私たちのプロダクションアプリとは別に、それは開発者のためのものであり、シンプルなので可能な限りコンポーネント内からすべての状態を扱いたいと思います。

もう1つ問題があります - オブジェクトの配列は、私たちのスタイルガイドのファイルのフォルダ構造です。リスト内の名前をクリックし、そのファイルの内容でビューを更新できる必要があります。これは、ファイルが子を持たないときにはうまく動作しますが、子ノードがある場合、親をクリックすると子がクリックされます。私はe.stopPropagation（）、e.preventDefault（）などを試しましたが、何の幸運もありませんでした。前もって感謝します。

親：

：

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 
    } 

これは、私はこれは私がここにフィドルとして、子供に持っているもの、本質的である

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 

子から呼び出すしたい機能です

https://jsfiddle.net/ssorallen/XX8mw/

唯一の違いは、トグルフュー私は親のsetVisibleSectionを呼び出そうとしていますが、ダイスはありません。ここで

は、コンポーネントが最初にレンダリングするときの小道具を示すコンソールの写真で、その後、再帰後：

Answer 1

私は本当にあなたの第二の問題を理解するとは思いません。問題を示すフィドルを投稿できますか？

あなたの最初の問題は、子供たちに小道具を渡す必要があると思います。私はあなたの例をあなたのフィドルに書き写そうとしました。ノードをクリックすると、ノードの名前に切り替えられたタイトルが表示されます。私は再帰中に '空' されているオブジェクトの小道具を示す上に画像を追加した

/** 
 
* 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>