如何將道具傳遞給遞歸子組件並保留所有道具

Question

我遇到了一個有趣的問題。我有一個父組件，它有一個對象數組傳遞給一個TreeView的子組件，這意味着它是遞歸的。我將一個函數和一些其他道具傳遞給子對象，以及由子對象遞歸處理的對象數組。當在孩子的渲染函數中記錄道具時，在第一次渲染時，所有道具都在那裏，但是隨着遞歸函數移動數組中的每個對象，它會丟失所有其他沒有被遞歸處理的道具。

當組分首先渲染道具對象是：爲prop1，PROP2，arrayOfObjects

由於它重新呈現爲遞歸正在發生，道具對象在子變爲：arrayOfObjects。

prop1和prop2已經消失。

最終的結果是，我無法從子項中調用父項中的函數，所以無法根據樹中單擊哪個節點來更新狀態。我沒有使用redux，因爲這是一種風格指南 - 與我們的產品應用程序分開，這意味着僅適用於開發人員，並且如果可能，我希望從組件內部處理所有狀態。

還有一個問題 - 對象數組是我們styleguide中文件的文件夾結構，我需要能夠單擊列表中的名稱，並使用該文件的內容更新視圖。這在文件沒有任何子項時工作正常，但是當有子節點時，如果我單擊父項，則會單擊該子項。我試過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/

唯一的區別是在裏面的切換fu我試圖在父母中調用setVisibleSection，但沒有骰子。

下面是該道具控制檯的照片時，該組件最初呈現，然後遞歸後：

Answer 1

我不認爲我真的能理解你的第二個問題。你可以張貼小提琴來展示這個問題嗎？

我認爲你的第一個問題是你需要將道具傳遞給孩子。我試圖將你的例子轉錄到你的小提琴上。您可以通過單擊節點來查看標題切換到節點的名稱。

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>