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

Question

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

组件第一次渲染时props对象为：prop1,prop2,arrayOfObjects

随着递归的发生而重新渲染，子对象中的 props 对象变为：arrayOfObjects。

prop1 和 prop2 消失了。

最终结果是我无法从子级调用父级中的函数，因此我无法根据单击树中的哪个节点来更新状态。我没有使用 redux，因为这是一个样式指南 - 与我们的生产应用程序分开，它仅供开发人员使用，而且很简单，所以如果可能的话，我想从组件中处理所有状态。

还有另一个问题 - 对象数组是我们样式指南中文件的文件夹结构，我需要能够单击列表中的名称，并使用该文件的内容更新视图。当文件没有任何子节点时，这可以正常工作，但是当有子节点时，如果我单击父节点，则会单击子节点。我已经尝试过 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

我不认为我真的理解你的第二个问题。你能发布一个显示问题的小提琴吗？

我认为您的第一个问题是您需要将道具传递给孩子们。我试图将您的示例转录到您的小提琴中。点击节点可以看到，标题切换到节点的名字。

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 = {
    	visible: true,
    };
  }
  
  toggle = () => {
    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((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 = {
    	visible: true,
    };
  }
  
  toggle = () => {
    this.setState({visible: !this.state.visible});
  };
  setVisibleSection(nodeTitle) {
    this.setState({
      title: nodeTitle
    })
  }
  render() {
    return (
    	<div>
      	Title: {this.state.title}
      	<TreeNode 
        	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>