Reactjs 如何将道具传递给递归子组件并保留所有道具

我遇到了一个有趣的问题。我有一个父组件，它有一个对象数组，该数组被传递给一个子组件，它是一个树视图，这意味着它是递归的。我将向子对象传递一个函数和一些其他道具，以及子对象递归处理的对象数组。将道具记录到子对象的渲染函数中时，在第一次渲染时，所有道具都在那里，但当递归函数在数组中的每个对象中移动时，它会“丢失”所有其他未被递归处理的道具

当组件第一次渲染道具对象时，道具对象为：prop1、prop2、arrayOfObjects

当发生递归时重新渲染时，子对象中的props对象变为：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

setVisibleSection（nodeTitle）{
这是我的国家({
章节：nodeTitle
})
}
render（）{
返回(
)
}
}
导出默认样式指南

这就是我在孩子身上的本质，作为一把小提琴：

唯一的区别是，在toggle函数中，我试图调用父函数中的setVisibleSection，但没有骰子

这是一张控制台的照片，显示了组件最初渲染时以及递归后的道具：

---

我想我不太理解你的第二期。你能贴一张小提琴来说明这个问题吗

我认为你的第一个问题是你需要把道具传给孩子们。我试着把你的例子抄下来。通过单击节点可以看到，标题切换为节点的名称

/**
*使用React 15.3.0
*
*-2016-08-12：更新至React 15.3.0，类语法
*-2016-02-16：更新至React 0.14.7，React多姆，巴别塔
*-2015-04-28：更新至反应0.13.6
*/
类TreeNode扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：对，
};
}
切换=（）=>{
this.setState（{visible:！this.state.visible}）；
this.props.setVisibleSection（this.props.node.title）
};
render（）{
var-childNodes；
var classObj；
if（this.props.node.childNodes！=null）{
childNodes=this.props.node.childNodes.map（（节点，索引）=>{
return

});
classObj={
togglable:是的，
“向下切换”：this.state.visible，
“启动”：！this.state.visible
};
}
var风格；
如果（！this.state.visible）{
样式={显示：“无”}；
}
返回(
{this.props.node.title}

{childNodes}

);
}
}
类ParentComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：对，
};
}
切换=（）=>{
this.setState（{visible:！this.state.visible}）；
};
设置可访问部分（节点）{
这是我的国家({
标题：诺蒂特尔
})
}
render（）{
返回(
标题：{this.state.Title}
);
}
}
变量树={
标题：“你好”，
子节点：[
{标题：“博比”}，
{标题：“苏西”，儿童节点：[
{标题：“小狗”，子节点：[
{标题：“狗屋”}
]},
{标题：“樱桃树”}
]}
]
};
ReactDOM.render(
,
document.getElementById（“树”）
);

感谢您查看此文档。在描述中，我将道具传递给孩子们。我试图将setVisibleSection函数作为道具传递给孩子。由于某种原因，它会被递归清除。在这里的示例中它确实起作用，但在我的机器上的控制台中，我可以看到对象的变化。它在第一次渲染时的状态与递归时的状态不同。我会贴一张照片。奇怪，我看到你把所有的道具都传给了正在递归的子组件。这就解决了问题。我将它们传递给孩子，但不是孩子在地图中对自己的引用。谢谢我已经添加了上面显示在递归过程中道具对象被“清空”的图像。递归后，我不再有权访问setVisibleSection函数。剩下的唯一道具是节点道具。如果我不将节点道具传递给子节点，则所有道具都保持不变。