Блог

У меня есть объект, который я хочу отправить компоненту и создать <ul> <li> список, подобный меню.

     const Data = [
  {
    name: "Item 1",
    children: []
  },
  {
    name: "Item 2",
    children: []
  },
  {
    name: "Item 3",
    show: false,
    children: [
      {
        name: "Child Item 1",
        children: []
      },
      {
        name: "Child Item 2",
        children: []
      },
      {
        name: "Child Item 3",
        show: false,
        children: [
          {
            name: "Child Child Item 1",
            children: []
          }
        ]
      }
    ]
  }
];
 

Теперь я хочу проанализировать эти данные в компоненте и хотел бы создать меню списка из n чисел без использования какого-либо статического значения, которое должно выглядеть примерно так, как показано ниже в html.

 <ul>
  <li>
    <a>Item 1</a>
  </li>
  <li>
    <a>Item 2</a>
  </li>
  <li>
    <a>Item 3</a>
    <ul>
      <li>
        <a>Child Item 1</a>
      </li>
      <li>
        <a>Child Item 2</a>
      </li>
      <li>
        <a>Child Item 3</a>
        <ul>
          <li>
            <a>Child Child Item 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>;
 

Я сделал это, используя несколько map функций, но это не сработает, если я не буду знать количество присутствующих детей.

Вы можете создать рекурсивный компонент, подобный этому:

 const TreeMenu = ({ data }) => {
    if (!data.children) // If it has no children just return its name
        return (
            <li>
                <a>{data.name}</a>
            </li>
        );

    return (
        <ul style={{ marginLeft: '1rem' }}>
            <a>{data.name}</a>
            {data.children.map((item) => (
                <TreeMenu data={item} />
            ))}
        </ul>
    );
};
 

Я немного изменил исходные данные, чтобы упростить рекурсивную функцию:

 const Data = {
    children: [
        {
            name: 'Item 1',
            children: [],
        },
        {
            name: 'Item 2',
            children: [],
        },
        {
            name: 'Item 3',
            show: false,
            children: [
                {
                    name: 'Child Item 1',
                    children: [],
                },
                {
                    name: 'Child Item 2',
                    children: [],
                },
                {
                    name: 'Child Item 3',
                    show: false,
                    children: [
                        {
                            name: 'Child Child Item 1',
                            children: [],
                        },
                    ],
                },
            ],
        },
    ],
};