主页 / 问题 / 1086330
Accepted
John
Asked:2020-02-23 17:10:38 +0000 UTC2020-02-23 17:10:38 +0000 UTC

如何使用 React 通过树递归输出嵌套数据

  • 772

资源： https ://codesandbox.io/s/dropdown-u7r6q

总结：数据 通过函数传递getData()给数据变量，处理将在其中handleData()

问题： 如何以这样一棵树的形式显示这些值

  <div>
      <b>Id: 1</b>
      <span>name: name1</span>
      <div>
        <b>Id: 1.1</b>
        <span>name: name1.1</span>
      </div>
    </div>
    <div>
      <b>Id: 2</b>
      <span>name: name2</span>
    </div>
    <div>
      <b>Id: 3</b>
      <span>name: name3</span>
      <div>
        <b>Id: 3.1</b>
        <span>name: name3.1</span>
        <div>
          <b>Id: 3.1.1</b>
          <span>name: name3.1.1</span>
        </div>
      </div>
      <div>
        <b>Id: 3.2</b>
        <span>name: name3.2</span>
      </div>

    </div>

javascript

1 个回答

  1. Best Answer

    没有重写你的代码，只是简单的补充。

    import React, { Component } from "react";

// создаем компонент для каждого элемента, называем его по-дурацки (например, Lala)
const Lala = ({ data }) => {
  const { id, parentId, name, children } = data;

  return (
    <div>
      <b>Id: {id}</b>
      <span>name: {name}</span>

      // здесь рекурсивно его вызываем, если у элемента в children есть еще такие же элементы
      {
          children &&
          children.map((i, n) => <Lala data={i} key={n} />)
      }
    </div>
  );
};

class Dropdown extends Component {
  render() {
    let data = getData();

    function handleData(obj) {

      // возвращаем полученный массив компонентов
      return [...obj.map((i, n) => <Lala data={i} key={n} />)];
    }

    let showHTMLData = handleData(data);

    return <div className="dropdown hide">{showHTMLData}</div>;
  }
}

export default Dropdown;

function getData() {
  return [
    {
      id: 3,
      parentId: null,
      name: "name3",
      children: [
        {
          id: 3.1,
          parentId: 3,
          name: "name3.1"
        }
      ]
    },

    {
      id: 2,
      parentId: null,
      name: "name2"
    },

    {
      id: 1,
      parentId: null,
      name: "name1",
      children: [
        {
          id: 1.1,
          parentId: 1,
          name: "name1.1"
        }
      ]
    }
  ];
}

    并进一步。您的方法应该接受一个objhandleData参数，尽管它实际上接受一个数组。给实体正确的名称，以免混淆。例如，不要将 obj命名为arr ( array )。

    • 3

相关问题