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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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