javascript - 使用 useState 添加一个 child 到树

Question

我有一个简单的 React 树，树的数据来自根节点，它递归地渲染它的子节点 -

<div className="Tree">
  <div>{props.name}</div>
  <div className="children">
    {props.children &&
      props.children.map((item) => {
        return <TreeNode name={item.name} children={item.children} />;
      })}
  </div>
</div>

通过更改 TreeNode 组件并使用 useState 我怎样才能为将子节点添加到树中的任何节点的操作做出选择？

这是我目前的代码 - Demo

(您可以在按钮中实现添加 child 的操作，并为新 child 起任何您想要的名字)

Answer 1

这是一个演示。我将每个子节点存储在父节点的组件状态中。输入显示单击添加时正在创建的节点的名称。

https://codesandbox.io/s/react-hooks-counter-demo-forked-b9mx5

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const TreeNode = (props) => {
  const [children, setChildren] = useState([]);
  const [input, setInput] = useState(props.name + "-0");

  function addNode(e) {
    e.preventDefault();
    setChildren((children) => [...children, { name: input, children: [] }]);
    setInput(`${props.name}-${children.length + 1}`);
  }

  return (
    <div className="Tree">
      <div>
        <span>{props.name}</span>
        <form onSubmit={addNode}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <button type="submit">Add child</button>
        </form>
      </div>
      <div className="children">
        {children &&
          children.map((item, index) => {
            return <TreeNode key={index} name={item.name} />;
          })}
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<TreeNode name="Node" />, rootElement);