如何使用 object 和 n 个子元素来创建组件？

Question

我有一个 object，我想将其发送到组件并创建 <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 函数完成了此操作，但如果我不知道 children 的数量，那将无法工作。

Answer 1

您可以像这样创建递归组件：

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: [],
                        },
                    ],
                },
            ],
        },
    ],
};

如何使用 object 和 n 个子元素来创建组件？

How to create a component using an object with n number of childrens in react?

menu

reactjs