1

Resourse: https://codesandbox.io/s/dropdown-u7r6q

Summary: Через функцию getData() передаются данные в переменную data, где будет обработка в handleData()

Question: Как вывести эти значение в виде такого дерева

  <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>

1 ответ 1

3

не стал переписывать Ваш код, а просто дополнил.

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"
        }
      ]
    }
  ];
}

и еще. у Вас Ваш метод handleData принимает якобы аргумент obj, хотя на деле принимает массив. давайте сущностям правильные имена,чтобы не сбивать с толку. например, вместо obj назовите его как arr (array).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.