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

IT技术 javascript tree reactjs
2021-05-21 12:11:35

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

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

这是我的数据：

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

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

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

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

我仍在努力思考 state 和 props 应该如何处理和划分。

谢谢

3个回答

我想用 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")
);

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

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

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

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

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

其它你可能感兴趣的问题
上一篇PLA连续工作温度 下一篇Redux - 管理预加载状态