So fügen Sie in React Knoten zum Baum hinzu

So fügen Sie Knoten zum Baum in React hinzu: 1. Führen Sie die Baumsteuerung von antd ein und implementieren Sie baumförmige Komponenten über „const treeData = [...]“ 2. Übergeben Sie den Schlüsselwert des aktuellen Knotens und durchlaufen Sie ihn data Array; 3. Wenn Sie das Array durchlaufen, um Knoten hinzuzufügen, fügen Sie einfach Knoten über den Abfragealgorithmus verschachtelter Array-Objekte hinzu.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie füge ich in React Knoten zum Baum hinzu?

Das React-Projekt führt die Baumsteuerung von antd ein, um das Hinzufügen, Löschen und Ändern von Knoten zu implementieren Schreiben Sie eine Antwort basierend auf antd. Ursprünglich dachte ich, dass die antd-Komponente recht einfach zum Hinzufügen, Löschen und Ändern des Baumsteuerelements sein sollte, aber ich hatte nicht erwartet, dass es immer noch viel Aufwand erfordern würde, als ich damit anfing. Deshalb habe ich vor, den gesamten Prozess der Umsetzung der Anforderungen aufzuzeichnen.

1. Einführung in die Baumsteuerung von antd

import React from "react";
import { Tree } from "antd";const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },];export default function TreeDemo() {
  return (
    <div>
      <tree></tree>
    </div>
  );}

Eine einfache baumförmige Komponente ist hier implementiert, aber diese Komponente hat im Grunde keine Funktion außer dem Durchsuchen und muss daher umgestaltet werden.

2. Transformieren Sie die Komponentencodestruktur

Im Allgemeinen ist es bei der Verwendung von antd-Komponenten am wichtigsten, die von antd bereitgestellte API zu verwenden. Obwohl wir nicht wissen, wie man sie schreibt, sollte es recht einfach sein wenn wir es nutzen können. Beim Durchsuchen der API des Baumsteuerelements habe ich festgestellt, dass die Komponente <tree></tree> eine Unterkomponente <treenode></treenode> hat, die die kleinste ist Komponente, aus der die gesamte Baumsteuerungseinheit besteht. Wenn wir also Ergänzungen, Löschungen und Änderungen implementieren möchten, müssen wir hart an dieser <treenode></treenode>-Komponente arbeiten. Basierend auf dieser Idee wird es dann in Folgendes umgewandelt.

import React, { useState } from "react";import { Tree } from "antd";const { TreeNode } = Tree;const treeData = [
  {
    value: "0",
    key: "0",
    children: [
      {
        value: "0-1",
        key: "0-1",
      },
      {
        value: "0-2",
        key: "0-2",
      },
    ],
  },];export default function TreeDemo() {
  const [data, setdata] = useState(treeData);
  const renderTreeNodes = (data) => {
    let nodeArr = data.map((item) => {
      item.title = <span>{item.value}</span>;

      if (item.children) {
        return (
          <treenode>
            {renderTreeNodes(item.children)}
          </treenode>
        );
      }

      return <treenode></treenode>;
    });

    return nodeArr;
  };

  return (
    <div>
      <tree>{renderTreeNodes(data)}</tree>
    </div>
  );}

Dann sieht es so aus:

Hier ist zu beachten, dass der Titel von <treenode></treenode> Daten vom Typ ReactNode empfängt, sodass Sie den Stil für die Anzeige der Daten basierend darauf definieren können, z. B. das Hinzufügen einer Symbolklasse. Dann sollte an diesem Punkt nicht jeder wissen, dass es Funktionen zum Hinzufügen, Löschen und Ändern geben sollte. Sie können einfach diesen Titel verwenden, um es zu zeigen, und dann können Sie es transformieren der Code.

import React, { useState } from "react";import { Tree } from "antd";import {
    EditOutlined,
    PlusOutlined,
    MinusOutlined,
  } from "@ant-design/icons";const { TreeNode } = Tree;const treeData = [
  {
    value: "0",
    key: "0",
    children: [
      {
        value: "0-1",
        key: "0-1",
      },
      {
        value: "0-2",
        key: "0-2",
      },
    ],
  },];export default function TreeDemo() {
  const [data, setdata] = useState(treeData);
  const renderTreeNodes = (data) => {
    let nodeArr = data.map((item) => {
      item.title = (
        <div>
          <span>{item.value}</span>
          <span>
            <editoutlined></editoutlined>

            <plusoutlined></plusoutlined>
           
            <minusoutlined></minusoutlined>
          </span>
        </div>
      );

      if (item.children) {
        return (
          <treenode>
            {renderTreeNodes(item.children)}
          </treenode>
        );
      }

      return <treenode></treenode>;
    });

    return nodeArr;
  };

  return (
    <div>
      <tree>{renderTreeNodes(data)}</tree>
    </div>
  );}

Jetzt gibt es drei Schaltflächen. Die spezifischen Funktionen sind immer noch nicht verfügbar, also machen wir sie nacheinander.

3. Implementieren Sie die Funktion zum Hinzufügen von Knoten

Um Knoten hinzuzufügen, besteht die Implementierungsmethode darin, den Schlüsselwert des aktuellen Knotens zu übergeben und dann das Datenarray zu durchlaufen, um Knoten hinzuzufügen der Abfragealgorithmus für verschachtelte Array-Objekte, der die in den letzten zwei Wochen erlernten Tiefen- und Breiten-Traversal-Ideen von Arrays verwendet. <tree></tree>组件有个子组件<treenode></treenode>，它就是组成整个树形控件的最小单元。所以我们如果要实现增删改的话，就要在这个<treenode></treenode>组件上下功夫。根据这个思路然后改造成如下的样子。

import React, { useState } from "react";import { Tree } from "antd";import { EditOutlined, PlusOutlined, MinusOutlined } from "@ant-design/icons";const { TreeNode } = Tree;const treeData = [
  {
    value: "0",
    key: "0",
    children: [
      {
        value: "0-1",
        key: "0-1",
      },
      {
        value: "0-2",
        key: "0-2",
      },
    ],
  },];export default function TreeDemo() {
  const [data, setdata] = useState(treeData);

  const renderTreeNodes = (data) => {
    let nodeArr = data.map((item) => {
      item.title = (
        <div>
          <span>{item.value}</span>
          <span>
            <editoutlined></editoutlined>

            <plusoutlined>onAdd(item.key)} />

            <minusoutlined></minusoutlined>
          </plusoutlined></span>
        </div>
      );

      if (item.children) {
        return (
          <treenode>
            {renderTreeNodes(item.children)}
          </treenode>
        );
      }

      return <treenode></treenode>;
    });

    return nodeArr;
  };

  const onAdd = (key) => {
    addNode(key,treeData); 
    //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象
    setdata(treeData.slice())
  };

  const addNode = (key,data) =>
    data.forEach((item) => {
      if (item.key === key) {
        if (item.children) {
          item.children.push({
            value: "default",
            key: key + Math.random(100), // 这个 key 应该是唯一的
          });
        } else {
          item.children = [];
          item.children.push({
            value: "default",
            key: key + Math.random(100),
          });
        }
        return;
      }
      if (item.children) {
       addNode(key, item.children);
      }
    });

  return (
    <div>
      <tree>{renderTreeNodes(data)}</tree>
    </div>
  );}

然后就是如下的样子：

这里要说明的一点是<treenode></treenode> Das Folgende ist der geänderte Code, der auf dieser Idee basiert:

  const onEdit = (key) => {
    editNode(key, treeData);
    setData(treeData.slice())
  };

  const editNode = (key, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        item.isEditable = true;
      } else {
        item.isEditable = false;
      }
      item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
      if (item.children) {
        editNode(key, item.children);
      }
    });const treeData = [
  {
    value: "0",
    key: "0",
    isEditable: false,
    children: [
      {
        value: "0-1",
        key: "0-1",
        isEditable: false,
      },
      {
        value: "0-2",
        key: "0-2",
        isEditable: false,
      },
    ],
  },];

Klicken Sie auf die Schaltfläche „Hinzufügen“ und ein neuer Standardknoten wird angezeigt:

3. Implementieren Sie die Bearbeitungsknotenfunktion

Nachdem Sie die Idee zum Hinzufügen haben Der Knoten oben, die anschließende Bearbeitung und die Löschfunktion sind einfacher zu verwenden. Hier werden nur Codeausschnitte angezeigt und die endgültige Version des Codes befindet sich am Ende des Artikels. Wenn Sie einen Knoten bearbeiten, müssen Sie den Knoten bearbeitbar machen, also müssen Sie eine Variable verwenden, um ihn zu verwalten.

 const onDelete = (key) => {
    deleteNode(key, treeData);
    setData(treeData.slice());
  };

  const deleteNode = (key, data) =>
    data.forEach((item, index) => {
      if (item.key === key) {
        data.splice(index, 1);
        return;
      } else {
        if (item.children) {
          deleteNode(key, item.children);
        }
      }
    });

4. Implementieren Sie die Knotenlöschfunktion

import React, { useState} from "react";import { Tree } from "antd";import {
  EditOutlined,
  PlusOutlined,
  MinusOutlined,
  CloseOutlined,
  CheckOutlined,} from "@ant-design/icons";import {nanoid} from "nanoid";const { TreeNode } = Tree;const treeData = [
  {
    value: "0",
    defaultValue: "0",
    key: "0",
    parentKey: '0',
    isEditable: false,
    children: [
      {
        value: "0-1",
        key: "0-1",
        defaultValue: "0-1",
        isEditable: false,
      },
      {
        value: "0-2",
        key: "0-2",
        defaultValue: "0-2",
        isEditable: false,
      },
    ],
  },];const expandedKeyArr = ["0"];export default function TreeDemo() {
  const [data, setData] = useState(treeData);
  const [expandedKeys, setExpandedKeys] = useState(expandedKeyArr);

  const onExpand = (expandedKeys) => {
    //记录折叠的key值
    setExpandedKeys(expandedKeys);
  };
  const renderTreeNodes = (data) => {
    let nodeArr = data.map((item) => {
      if (item.isEditable) {
        item.title = (
          

             onChange(e, item.key)} />

             onClose(item.key, item.defaultValue)}
            />

             onSave(item.key)}
            />
          

        );
      } else {
        item.title = (
          

            {item.value}
            
               onEdit(item.key)}
              />

               onAdd(item.key)}
              />
              {item.parentKey === "0" ? null : (
                 onDelete(item.key)}
                />
              )}
            
          
        );
      }

      if (item.children) {
        return (
          
            {renderTreeNodes(item.children)}
          
        );
      }

      return <treenode></treenode>;
    });

    return nodeArr;
  };

  const onAdd = (key) => {
    if (expandedKeys.indexOf(key) === -1) {
      expandedKeyArr.push(key);
    }
    setExpandedKeys(expandedKeyArr.slice());

    addNode(key, treeData);
    //useState里数据务必为immutable （不可赋值的对象），所以必须加上slice()返回一个新的数组对象
    setData(treeData.slice());
  };

  const onEdit = (key) => {
    editNode(key, treeData);
    setData(treeData.slice());
  };

  const editNode = (key, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        item.isEditable = true;
      } else {
        item.isEditable = false;
      }
      item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
      if (item.children) {
        editNode(key, item.children);
      }
    });

  const addNode = (key, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        if (item.children) {
          item.children.push({
            value: "default",
            key: nanoid(), // 这个 key 应该是唯一的
          });
        } else {
          item.children = [];
          item.children.push({
            value: "default",
            key: nanoid(),
          });
        }
        return;
      }
      if (item.children) {
        addNode(key, item.children);
      }
    });

  const onChange = (e, key) => {
    changeNode(key, e.target.value, treeData);
    setData(treeData.slice());
  };

  const changeNode = (key, value, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        item.value = value;
      }
      if (item.children) {
        changeNode(key, value, item.children);
      }
    });

  const onSave = (key) => {
    saveNode(key, treeData);
    setData(treeData.slice());
  };

  const saveNode = (key, data) =>
    data.forEach((item) => {
      if (item.key === key) {
        item.defaultValue = item.value;
      }
      if (item.children) {
        saveNode(key, item.children);
      }
      item.isEditable = false;
    });

  const onClose = (key, defaultValue) => {
    closeNode(key, defaultValue, treeData);
    setData(treeData);
  };

  const closeNode = (key, defaultValue, data) =>
    data.forEach((item) => {
      item.isEditable = false;
      if (item.key === key) {
        item.value = defaultValue;
      }
      if (item.children) {
        closeNode(key, defaultValue, item.children);
      }
    });

  const onDelete = (key) => {
    deleteNode(key, treeData);
    setData(treeData.slice());
  };

  const deleteNode = (key, data) =>
    data.forEach((item, index) => {
      if (item.key === key) {
        data.splice(index, 1);
        return;
      } else {
        if (item.children) {
          deleteNode(key, item.children);
        }
      }
    });

  return (
    

      
        {renderTreeNodes(data)}
      
    
  );}

5. Vervollständigen Sie den Code

rrreee empfiehlt das Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo fügen Sie in React Knoten zum Baum hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!