[英]ReactJS MUI Component not rendering inside map function
I am using ReactJS along with Material UI Components.我正在使用 ReactJS 以及 Material UI 组件。 I am trying to render a custom element using the below code.
我正在尝试使用以下代码呈现自定义元素。 The options array is never empty and the console logs are showing as expected - "Adding element to grid..".
选项数组永远不会为空,并且控制台日志按预期显示 - “将元素添加到网格......”。 However, the element is not rendered on the browser(I checked the browser Inspector to confirm).
但是,该元素未在浏览器上呈现(我检查了浏览器检查器以确认)。
What am I missing?我错过了什么?
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>
);
})}
)
}
You should use parentheses instead of curly brackets inside the first map in the return()您应该在 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>
);
))}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.