16

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

基本上，我有一棵树，一个可以任意嵌套的列表列表（列表...），我想要一个组件来显示它并启用重新排列。

这是我的数据：

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

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

所以我想我会让树的每个“节点”成为这个组件自己的实例。但这是我的问题（对不起，介绍很长）：

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

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

谢谢

4

3 回答 3

27

我想用 React 尝试树形结构，并想出了一个简单的组件，当您单击 时会隐藏子树<h5>。一切都是一个TreeNode。这和你想的一样吗？

您可以在此 JSFiddle 中看到它的实际效果：http: //jsfiddle.net/ssorallen/XX8mw/

树节点.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")
);
于 2013-12-24T02:55:01.107 回答
5

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

您可能想查看此链接： http: //facebook.github.io/react/blog/2013/11/05/thinking-in-react.html。它描述了您遇到的困境以及如何解决它。

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

于 2013-12-23T07:10:47.790 回答
-1

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

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

于 2015-03-24T04:05:33.550 回答