javascript - 如何为树中每个深度嵌套的节点管理状态 'collapsed'

Question

我有一个复杂的动态数据结构，如下所示:

const tree = [
  {
    name: "Root Node",
    collapsed: true,
    nodes: [
      {
        name: "Node 1",
        collapsed: true,
        nodes: [
          {
            name: "Sub node"
          }
        ]
      },
      {
        name: "Node 2",
        collapsed: true,
        nodes: [
          {
            name: "Sub node "
          }
        ]
      },
      {
        name: "Node 3",
        collapsed: true,
        nodes: [
          {
            name: "Sub node"
          }
        ]
      }
    ]
  }
];`

我将其设置为我的组件的初始状态。

然后我将此状态呈现为 UI 中的层次结构树。

当我单击顶级节点时，我想更新状态中的折叠属性以打开它并显示下一组节点。

我遇到的问题是如何调用 setState() 并更新这个复杂的数据结构而不引起突变并做一些丑陋的事情，比如 tree[0].nodes[0].collapsed: false。

所以我首先尝试这样设置状态

handleClick(el, event) {
    this.setState({
        tree: this.findAndUpdateState(event.target.id).bind(this)
    });
}

所以在节点的 handleClick 事件上，我调用它调用 findAndUpdateState。

findAndUpdateState(id) {
    this.state.tree.map((node) => {
      //Map over the nodes somehow and find the node that needs its state updated using the ID?
      });
    });
}

我想更新已尝试展开的节点的折叠属性。但要这样做，我必须遍历所有状态，然后创建一个新的状态副本来更新那个属性。一定有一种我没有想到的更好更简单的方法。

Answer 1

React 非常擅长做这些事情。

我正在使用 React 中的 Hooks，因为我喜欢它们......:)

下面是一个工作片段..

const tree = [{"name":"Root Node","collapsed":true,"nodes":[{"name":"Node 1","collapsed":true,"nodes":[{"name":"Sub node"}]},{"name":"Node 2","collapsed":true,"nodes":[{"name":"Sub node "}]},{"name":"Node 3","collapsed":true,"nodes":[{"name":"Sub node"}]}]}];

const {useState} = React;


function TreeItem(props) {
  const {item} = props;
  const [collapsed, setCollapsed] = useState(item.collapsed);
  return <div className="item">
    <span onClick={() => setCollapsed(!collapsed)}>{item.name}</span>
    {!collapsed && item.nodes && 
      <div style={{paddingLeft: "1rem"}}>
        <TreeList list={item.nodes}/>
      </div>
    }
  </div>
}

function TreeList(props) {
  const {list} = props;
  return <div>{list.map(f => <TreeItem key={f.name} item={f}/>)}</div>;
}

ReactDOM.render(<TreeList list={tree}/>, document.querySelector('#mount'));

.item {
  cursor: pointer;
  user-select: none;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="mount"></div>