Reactjs 幻灯片材质UI无法读取“的属性样式”；“未定义”；

我最近在我的项目中实现了Material UI Slide，我想问是否有人可以向我解释一下，当我这样编写代码时，为什么代码可以工作：

{selectedItem && selectedItem.modal && selectedItem.modal.body ? (
    selectedItem.modal.body.map((section, key) => (
      <Section section={section} key={key} />
    ))
  ) : (
    <Slide
      direction={animate === 'stepIn' ? 'right' : 'left'}
      in={animate === 'idle'}
    >
      <Grid container={true} spacing={3}>
        {items.map((item, key) => (
          <Grid item={true} xs={6} md={4} lg={3} key={key}>
            <MaterialCard
              key={key}
              onClick={onCardClicked(item)}
              className={classes.card}
            >
              <CardActionArea className={classes.cardArea}>
                <CardMedia
                  image={item.image || undefined}
                  component="img"
                />

                <CardContent className={classes.cardContent}>
                  <Typography
                    component="p"
                    className={classes.cardContentTypographyHeader}
                  >
                    <Hyphenated language={de}>{item.label}</Hyphenated>
                  </Typography>

                  {item.description ? (
                    <Typography
                      component="p"
                      className={classes.cardContentTypography}
                    >
                      <Hyphenated language={de}>
                        {item.description}
                      </Hyphenated>
                    </Typography>
                  ) : null}
                </CardContent>
              </CardActionArea>

              {selectedItem && selectedItem.id === item.id ? (
                <>
                  <div className={classes.cardSelectedOverlay} />
                  <Done className={classes.cardSelectedOverlayIcon} />
                </>
              ) : null}
            </MaterialCard>
          </Grid>
        ))}
      </Grid>
    </Slide>

{selectedItem&&selectedItem.modal&&selectedItem.modal.body(
选择editem.modal.body.map（（节，键）=>(
))
) : (
{items.map（（item，key）=>(
{item.label}
{item.description(
{item.description}
)：null}
{selectedItem&&selectedItem.id==item.id(
)：null}
))}

但是当我在幻灯片中移动section.map时无法编译。我也想为即将到来的部分设置动画

<Slide
    direction={animate === 'stepIn' ? 'right' : 'left'}
    in={animate === 'idle'}
  >
    {selectedItem && selectedItem.modal && selectedItem.modal.body ? (
      selectedItem.modal.body.map((section, key) => (
        <Section section={section} key={key} />
      ))
    ) : (
      <Grid container={true} spacing={3}>
        {items.map((item, key) => (
          <Grid item={true} xs={6} md={4} lg={3} key={key}>
            <MaterialCard
              key={key}
              onClick={onCardClicked(item)}
              className={classes.card}
            >
              <CardActionArea className={classes.cardArea}>
                <CardMedia
                  image={item.image || undefined}
                  component="img"
                />

                <CardContent className={classes.cardContent}>
                  <Typography
                    component="p"
                    className={classes.cardContentTypographyHeader}
                  >
                    <Hyphenated language={de}>{item.label}</Hyphenated>
                  </Typography>

                  {item.description ? (
                    <Typography
                      component="p"
                      className={classes.cardContentTypography}
                    >
                      <Hyphenated language={de}>
                        {item.description}
                      </Hyphenated>
                    </Typography>
                  ) : null}
                </CardContent>
              </CardActionArea>

              {selectedItem && selectedItem.id === item.id ? (
                <>
                  <div className={classes.cardSelectedOverlay} />
                  <Done className={classes.cardSelectedOverlayIcon} />
                </>
              ) : null}
            </MaterialCard>
          </Grid>
        ))}
      </Grid>
    )}
  </Slide>

{selectedItem&&selectedItem.modal&&selectedItem.modal.body(
选择editem.modal.body.map（（节，键）=>(
))
) : (
{items.map（（item，key）=>(
{item.label}
{item.description(
{item.description}
)：null}
{selectedItem&&selectedItem.id==item.id(
)：null}
))}
)}

该代码适用于每一张卡，但其中包含模式的卡除外。模式包含文本、文本输入等内容。当我单击其中包含模式的卡时，会出现以下错误：

感谢您的帮助！

在的文档中，您可以找到：

单个子内容元素

⚠️ 需要能够持有ref

幻灯片

向单个子项添加参考和道具。如果有多个子项或

子项

是数组（即使数组仅包含一个子项），然后，

Slide

将获得您遇到的错误，因为未定义

子.props

，并且它正在尝试引用

子.props.style

下面是一个小示例，有助于更好地理解错误的原因：

import React from "react";
import ReactDOM from "react-dom";

const MockSlide = ({ children }) => {
  if (children.props) {
    return (
      <div>
        {children}
        children.props is defined
      </div>
    );
  }
  return (
    <div>
      {children}
      children.props is not defined
    </div>
  );
};
const sectionArray = [
  "An array also causes problems (even if only one element)"
];
function App() {
  return (
    <div className="App">
      <MockSlide>
        <div>Single child works fine</div>
      </MockSlide>
      <br />
      <br />
      <MockSlide>
        <div>Multiple children</div>
        <div>causes problems with Slide</div>
      </MockSlide>
      <br />
      <br />
      <MockSlide>
        {sectionArray.map(section => {
          return <div>{section}</div>;
        })}
      </MockSlide>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
常量MockSlide=（{children}）=>{
如果（儿童道具）{
返回(
{儿童}
定义了children.props
);
}
返回(
{儿童}
未定义children.props
);
};
常量节数组=[
“数组也会导致问题（即使只有一个元素）”
];
函数App（）{
返回(
独生子女工作很好




多子女
导致幻灯片出现问题




{sectionArray.map（section=>{
返回{section}；
})}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

一种可能的解决方案是将
幻灯片中的所有内容包装在一个
元素中