ReactJS MUI 组件未在内部呈现 map function

Question

我正在使用 ReactJS 以及 Material UI 组件。 我正在尝试使用以下代码呈现自定义元素。 选项数组永远不会为空，并且控制台日志按预期显示 - “将元素添加到网格......”。 但是，该元素未在浏览器上呈现（我检查了浏览器检查器以确认）。

我错过了什么？

import React from "react";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
const Element = (props) => {
  const {options} = props;
  
  return(
     // If I simply pass a JSX component at this location, it renders fine. 
     // But not inside the map function
     {options.map((opt) => {
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      })} 
  )
}

Answer 1

您应该在 return() 的第一个 map 内使用圆括号而不是大括号

{options.map((opt) => (
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      ))}