帶有onclick事件的嵌套狀態（反應）

我的任務是構建具有某些功能的遞回樹。我設法使用遞回組件構建了一棵樹，我附上了下面的代碼。

function App() {
  const [data, setData] = useState([{
    id: 1,
    name: "node 1",
    children: [{
      id: 2,
      name: "node 1.1",
      children: [{
        id: 8,
        name: "node 1.1.1",
        children: []
      }]
    },{
      id: 3,
      name: "node 1.2",
      children: [{
        id: 4,
        name: "node 1.2.1",
        children: [{
          id: 5,
          name: "node 1.2.1.1",
          children: []
        }]
      }]
    }]
  }])


  return (
    <div className="App">
      <Tree data = {data} setData = {setData} margin={15}/>
      <button>Add child</button>
    </div>
  );
}

和

const Tree = ({data, margin, setData}) => {
    return (
        <Fragment>
            {data.map((element, index) => (
             <div>
                 <div className="tier">
                    <div
                        style={{marginLeft: `${margin}px`}}
                    >
                        {element.name}
                    </div>
                 </div>
                {element.children && element.children.length ? <Tree
                    data={element.children}
                    setData={setData}
                    margin={margin   15}
                /> : false}
             </div>))}
        </Fragment>
    );
};

單擊它時，我需要添加一個節點選擇。我對實作有一個想法：創建一個將存盤所需節點 ID 的狀態，并使用 CSS 進行設計。但是我完全不知道如何在單擊按鈕時將子節點添加到所選節點。

uj5u.com熱心網友回復：

您完成了一半的作業，并且您對存盤的想法id總體上是最好的，您實際上可以存盤selected item本身，但由于此專案的突變，它不會像聽起來那么好，您將無法觸發相關掛鉤更新它。

因此，您只需要存盤id所選專案的 和一些實用程式即可簡化tree. 在下面的代碼中，您可以看到是根據原始資料flatTree計算得出的。useMemo它只是將您的樹展平為一個陣列，因此您將能夠輕松找到真正的選定專案并計算id將在按鈕單擊時插入的下一個專案。并將 a 添加few more props到Tree組件本身。onClick處理實際點擊并selectedTreeItem為選定專案添加一些類（可選）。

import "./styles.css";
import { Fragment, useEffect, useMemo, useState } from "react";

export default function App() {
  const [data, setData] = useState([{id:1,name:"node 1",children:[{id:2,name:"node 1.1",children:[{id:8,name:"node 1.1.1",children:[]}]},{id:3,name:"node 1.2",children:[{id:4,name:"node 1.2.1",children:[{id:5,name:"node 1.2.1.1",children:[]}]}]}]}]);

  const [selectedTreeItemId, setSelectedTreeItemId] = useState();

  const flatTree = useMemo(() => {
    const flat = (item) => [item, ...(item.children || []).flatMap(flat)];
    return data.flatMap(flat);
  }, [data]);

  const selectedTreeItem = useMemo(() => {
    if (!selectedTreeItemId || !flatTree) return undefined;
    return flatTree.find((x) => x.id === selectedTreeItemId);
  }, [flatTree, selectedTreeItemId]);

  const getNextListItemId = () => {
    const allIds = flatTree.map((x) => x.id);
    return Math.max(...allIds)   1;
  };

  const onTreeItemClick = ({ id }) => {
    setSelectedTreeItemId((curr) => (curr === id ? undefined : id));
  };

  const onAddChildClick = () => {
    if (!selectedTreeItem) return;
    if (!selectedTreeItem.children) selectedTreeItem.children = [];
    const newObj = {
      id: getNextListItemId(),
      name: `${selectedTreeItem.name}.${selectedTreeItem.children.length   1}`,
      children: []
    };
    selectedTreeItem.children.push(newObj);

    // dirty deep-clone of the tree to force "selectedTreeItem"
    // to be recalculated and its !reference! to be updated.
    // so any hook that has a "selectedTreeItem" in depsArray
    // will be executed now (as expected)
    setData((curr) => JSON.parse(JSON.stringify(curr)));
  };

  useEffect(() => {
    console.log("selectedTreeItem: ", selectedTreeItem);
  }, [selectedTreeItem]);

  return (
    <div className="App">
      <Tree
        data={data}
        margin={15}
        onTreeItemClick={onTreeItemClick}
        selectedTreeItem={selectedTreeItem}
      />
      <button
        type="button"
        disabled={!selectedTreeItem}
        onClick={onAddChildClick}
      >
        Add child
      </button>
    </div>
  );
}

const Tree = ({ data, margin, onTreeItemClick, selectedTreeItem }) => {
  return (
    <Fragment>
      {data.map((element) => (
        <div key={element.id}>
          <div
            className={`tier ${
              selectedTreeItem === element ? "selected-list-item" : ""
            }`}
            onClick={() => onTreeItemClick(element)}
          >
            <div style={{ marginLeft: `${margin}px` }}>
              {element.id}: {element.name}
            </div>
          </div>
          {element.children?.length > 0 && (
            <Tree
              data={element.children}
              margin={margin   15}
              onTreeItemClick={onTreeItemClick}
              selectedTreeItem={selectedTreeItem}
            />
          )}
        </div>
      ))}
    </Fragment>
  );
};

uj5u.com熱心網友回復：

您也應該映射日期樹中的嵌套陣列。它應該看起來像這樣

{element.children?.map(el, I => (
<p key={I}> {el. name}</p>

{el.children?.map(child, ind => (
<p key={ind}>{child.name}</p>
)}
)}

這?非常重要，因為它只有在有這樣的日期時才會起作用。

標籤：反应递归

上一篇：Zibonacci遞回，我的解決方案有什么問題？

下一篇：遞回為4，但預期輸出為64