Question

我一直在努力解决这个问题，试图找出“做出反应”的方法。

基本上，我有一个树，一个列表（列表......）可以任意嵌套，我希望有一个组件可以显示这个并启用重新排列。

这是我的数据：

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

我的第一个传递是只有一个“树”组件，它在其渲染函数（look at the code here）中构建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")
);

Answer 2

似乎将所有内容作为道具传递更好，因为这样可以防止您管理单个插入/删除的麻烦。此外，正如评论所说，key属性可以防止大量不必要的重新渲染。

您可以查看此链接：http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html。它描述了你所面临的困境以及如何处理它。

（巧合的是，我刚才做了一个反应树视图：https://github.com/chenglou/react-treeview。从中获取任何你想要的东西！）

Answer 3

以下是如何使用React和Flux创建树视图的快速示例。 http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

React组件是递归的，状态是使用Flux管理的。

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

3 个答案: