时间戳

首页 > 解决方案 > React 不渲染第二张地图

javascript - React 不渲染第二张地图

问题描述

我正在尝试在地图功能中制作第二张地图。它显示了我的 console.log，但没有渲染任何东西。

这是我的对象：

  const sidebarItems = [
    {
      icon: DashboardIcon,
      name: 'DASHBOARD',
      path: '/dashboard',
    },
    {
      icon: TaskManagementIcon,
      name: 'TASK MANAGEMENT',
      path: '/task-management',
      subpages: [
        {
          icon: TaskManagementIcon,
          name: 'BOARD VIEW',
          path: 'task-management/board',
        },
        {
          icon: TaskManagementIcon,
          name: 'LIST VIEW',
          path: 'task-management/list',
        },
      ],
    }
  ];

然后这是我的反应组件：

function Sidebar({ items, location }) {
  return (
    <div className="app-sidebar">
      <div className="app-sidebar-items">
        {items.map(item => {
          const path = `/app${item.path}`;
          if (path === location.pathname) {
            if (typeof item.subpages !== 'undefined') {
              item.subpages.map(i => {
                return <p>Foo</p>
              });
            }
          }

          return <p>Bar</p>
        })}
      </div>
    </div>
  );
}

上面的代码总是显示“Bar”文本。奇怪的是，如果我执行 console.log(i)，它会显示子项......为什么它不起作用？

谢谢 ：）

标签： javascriptreactjsdictionaryobject

解决方案

You forgot to return the subpages map. Without that return, the function keeps executing until it gets to return <p>Bar</p>, so that's all you'll ever see.

JSX is just pure javascript with some syntax sugar. Rendering JSX only does anything if it's returned.

    items.map(item => {
      const path = `/app${item.path}`;
      if (path === location.pathname) {
        if (typeof item.subpages !== 'undefined') {
          return item.subpages.map(i => {
          // ^ added
            return <p>Foo</p>
          });
        }
      }

      return <p>Bar</p>
    })

推荐阅读