调用自定义函数什么都不渲染？答案

【问题标题】：Calling custom function renders nothing?调用自定义函数什么都不渲染？
【发布时间】：2020-08-05 10:04:23
【问题描述】：

我正在使用material-ui-nested-menu-item 库： https://codesandbox.io/s/material-ui-nested-menu-item-example-b25j6

但是我需要制作一个可重用的组件，您可以将要渲染的组件传递给它。我成功地制作了一个组件，该组件可与最多 2 个级别的数组一起使用： https://codesandbox.io/s/material-ui-nested-menu-item-example-izhvq?file=/src/App.tsx

但是我需要让它在无限关卡中工作，所以我正在尝试制作一个递归渲染函数。我只创建了一个customRender（它还不是递归的），但是它什么也不渲染。 https://codesandbox.io/s/material-ui-nested-menu-item-example-54q1k

我不明白为什么会这样，好像我注销了item.component 我可以看到文字。这可能是图书馆的 qwerk 还是我做错了事？

import React, { useState } from "react";
import { Menu, MenuItem, Typography } from "@material-ui/core";
import NestedMenuItem from "material-ui-nested-menu-item";

const items = [
  {
    component: "Parent 1"
  },
  {
    component: "Parent 2"
  },
  {
    component: "Parent with child",
    items: [
      {
        component: "Child 1"
      }
    ]
  }
];

export const NestedMenu = () => {
  const [menuPosition, setMenuPosition] = useState<any>(null);
  const handleRightClick = (event: React.MouseEvent) => {
    if (menuPosition) {
      return;
    }
    event.preventDefault();
    setMenuPosition({
      top: event.pageY,
      left: event.pageX
    });
  };

  const handleItemClick = (event: React.MouseEvent) => {
    setMenuPosition(null);
  };

  const customRender = items => {
    items.map((item, index) => {
      if (item.items) {
        return (
          <NestedMenuItem
            label={item.component}
            parentMenuOpen={!!menuPosition}
            onClick={handleItemClick}
          >
            {item.items.map((childItem, childItemIndex) => {
              return (
                <MenuItem key={childItemIndex} onClick={handleItemClick}>
                  {childItem.component}
                </MenuItem>
              );
            })}
          </NestedMenuItem>
        );
      }
      return (
        <MenuItem key={index} onClick={handleItemClick}>
          {item.component}
        </MenuItem>
      );
    });
  };

  return (
    <div onContextMenu={handleRightClick}>
      <Typography>Right click to open menu</Typography>
      <Menu
        open={!!menuPosition}
        onClose={() => setMenuPosition(null)}
        anchorReference="anchorPosition"
        anchorPosition={menuPosition}
      >
        {customRender(items)}
      </Menu>
    </div>
  );
};

export default NestedMenu;

【问题讨论】：

我猜你在customRender 中错过了return。在 items.map 之前添加 return - return items.map((item, index) => {

标签： reactjs

【解决方案1】：

你必须在这里 return 有效的 JSX 元素 - {customRender(items)}。

在items.map之前添加一个return关键字

 const customRender = items => {
    return items.map((item, index) => {
    ...

【讨论】：