如何在reactjs中管理树组件中的状态

Question

我已经为此苦苦挣扎了几天，试图找出“反应”的方式。

基本上，我有一棵树，一个可以任意嵌套的列表列表（列表），我想要一个可以显示此内容并允许重新排列的组件。

这是我的数据：

var data = [{
      id: 1
    }, {
      id: 2, children: [
        {
          id: 3, children: [{id: 6}]
        }, {
          id: 4
        }, {
          id: 5
        }]
    }]

我的第一步是只具有一个“树”组件，该组件在其render函数中构建DOM元素的嵌套列表（请参见此处的代码）。对于少数元素，这实际上效果很好，但是我希望能够支持数百个元素，并且当在树中移动元素时，重新渲染的成本非常高（当有数百个元素时，约为600毫秒）元素）。

因此，我认为我将拥有树的每个“节点”，因为它是该组件的自己的实例。但是， 这是我的问题（很长的介绍很抱歉）：

每个节点是否应该从中央“数据库”动态查询列表的子代ID，并将其存储在状态中？还是最顶层的节点应该加载整棵树并通过道具传递所有内容？

我仍在努力思考如何处理和分散状态和道具。

谢谢

Answer 1

我想用React尝试树结构，并想出一个简单的组件，当您单击时可以隐藏子树<h5>。一切都是一个TreeNode。这与您的想法类似吗？

您可以在此JSFiddle中查看它的运行情况：http :
//jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx ：

var TreeNode = React.createClass({
  getInitialState: function() {
    return {
      visible: true
    };
  },
  render: function() {
    var childNodes;
    if (this.props.node.childNodes != null) {
      childNodes = this.props.node.childNodes.map(function(node, index) {
        return <li key={index}><TreeNode node={node} /></li>
      });
    }

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

    return (
      <div>
        <h5 onClick={this.toggle}>
          {this.props.node.title}
        </h5>
        <ul style={style}>
          {childNodes}
        </ul>
      </div>
    );
  },
  toggle: function() {
    this.setState({visible: !this.state.visible});
  }
});

bootstrap.jsx ：

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

React.render(
  <TreeNode node={tree} />,
  document.getElementById("tree")
);