如何递归地呈现基于深度嵌套数组的React组件？

Question

当我是孩子的孩子时，我试着达到持续的列表.但有件事我被困住了，我该怎么列出来呢？为了给出一个例子，我希望模式如下

请记住，我在回复或阅读这条帖子时对js的反应是新的。我可能很难表达自己。

Menu 1 Menu Title
Menu 2 Menu Title
--Menu 2.1 Menu category-header
--Menu 2.2 Menu category-header
--Menu 2.3 Menu category-header
---Menu 2.3.1 Menu sub-category-header
---Menu 2.3.2 Menu sub-category-header
---Menu 2.3.3 Menu sub-category-header
----Menu 2.3.3.1 Menu sub-sub-category-header
----Menu 2.3.3.2 Menu sub-sub-category-header

const menuData = [
        {
            name: "Menu 1",
            url: "/"
        },
        {
            name: "Menu 2",
            children: [
                {
                    name: "Menu 2.1",
                    url: "/page/menu-2-1"
                },
                {
                    name: "Menu 2.2",
                    url: "/page/menu-4-2"
                },
                {
                    name: "Menu 2.3",
                    children: [
                        {
                            name: "Menu 2.3.1",
                            url: "/page/menu-2-3-1"
                        },
                        {
                            name: "Menu 2.3.2",
                            url: "/page/menu-2-3-2"
                        },
                        {
                            name: "Menu 2.3.3",
                            children: [
                                {
                                    name: "Menu 2.3.3.1",
                                    children: [
                                        {
                                            name: "Menu 2.3.3.1.1",
                                            url: "/page/menu-2-3-3-1-1"
                                        },
                                        {
                                            name: "Menu 2.3.3.1.2",
                                            url: "/page/menu-2-3-3-1-2"
                                        }
                                    ]
                                },
                                {
                                    name: "Menu 4.3.3.2",
                                    url: "/page/menu-4-3-3-2"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

const Menu = ({data}) => {
    const renderMenuItems = data => {
        return data.map(
            (item, index) =>
                (item?.children && item?.children.length) ?
                    (
                        console.log(item)
                    ) :
                    <li className="nav-item" key={index}>
                        <Link className="nav-link" to={item.url}>{item.name}</Link>
                    </li>

        )
    }
    return data && (
        <nav className="navbar navbar-expand-md navbar-main border-bottom">
            <div className="container">
                <div className="collapse navbar-collapse mobile-menu">
                    <ul className="nav navbar-nav">
                        {renderMenuItems(data)}
                    </ul>
                </div>
            </div>
        </nav>

    );
}
export default Menu;

<nav>
    <ul>
        <li>
            <a href="url">Menu 1</a>
        </li>
        <li>
            <a href="url" class="category-header">Woman</a>
            <div class="sub-nav">
                <div class="sub-nav-center">
                    <div class="sub-nav-outer">
                        <div class="normal-column">
                            <div class="category-box">
                                <a href="url" class="sub-category-header">Clothes</a>
                                <ul class="sub-item-list">
                                    <li>
                                        <a href="">T-shirt</a>
                                    </li>
                                    <li>
                                        <a href="">Shorts</a>
                                    </li>
                                    <li>
                                        <a href="">Shirt</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</nav>

​

​

​

​

Answer 1

您必须递归地呈现每个元素，直到元素不再有子元素为止。

我使用您的数据创建了一个简单的示例。在这里，List为数组的每个元素映射和呈现ListItem，如果元素有子元素，ListItem再次呈现List。

您可以使用组件进行类似的操作。

​

const { useState, useEffect } = React;

const menuData = [
  {
    name: 'Menu 1',
    url: '/',
  },
  {
    name: 'Menu 2',
    children: [
      {
        name: 'Menu 2.1',
        url: '/page/menu-2-1',
      },
      {
        name: 'Menu 2.2',
        url: '/page/menu-4-2',
      },
      {
        name: 'Menu 2.3',
        children: [
          {
            name: 'Menu 2.3.1',
            url: '/page/menu-2-3-1',
          },
          {
            name: 'Menu 2.3.2',
            url: '/page/menu-2-3-2',
          },
          {
            name: 'Menu 2.3.3',
            children: [
              {
                name: 'Menu 2.3.3.1',
                children: [
                  {
                    name: 'Menu 2.3.3.1.1',
                    url: '/page/menu-2-3-3-1-1',
                  },
                  {
                    name: 'Menu 2.3.3.1.2',
                    url: '/page/menu-2-3-3-1-2',
                  },
                ],
              },
              {
                name: 'Menu 4.3.3.2',
                url: '/page/menu-4-3-3-2',
              },
            ],
          },
        ],
      },
    ],
  },
];

function ListItem({ listItem }) {
  const { name, url, children } = listItem;
  return (
    <li>
      <p>
        {name} - {url}
      </p>
      {Array.isArray(children) && <List list={children} />}
    </li>
  );
}

function List({ list }) {
  return (
    <ul>
      {list.map((listItem) => (
        <ListItem key={listItem.name} listItem={listItem} />
      ))}
    </ul>
  );
}
function App() {
  return <List list={menuData} />;
}

ReactDOM.render(<App />, document.querySelector('#root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

​