javascript - react 。如何在没有警告的情况下将 Grid 插入 TabPanel？

Question

问题不言自明。我正在使用 Material-UI 中的选项卡，这样我就可以根据用户的选择呈现不同的网格。每个面板都应包含一个带有各种文本字段和组件的网格。问题是我收到一条警告:

Warning: validateDOMNesting(...): div cannot appear as a descendant of p.

代码如下:

<Grid item md={10} xs={10} className={classes.divStyle}>
      {categories.map((category, i) => (
             <TabPanel value={value} index={i} key={`tabpanel-${i}`}>
                  <Grid p={3}>
                  </Grid>
              </TabPanel>
                ))};
</Grid>

我该如何解决？提前致谢!

Answer 1

您的代码基本上是正确的(假设您没有在此处显示 TabContext、Tab、值等)。

检查您是否有一个呈现为 <p> 的父组件标签，例如通过使用浏览器代码检查。

此错误的常见来源似乎是父级 <Typography>元素，呈现为 <p>默认标记。这可以通过例如更改<Typography component="div"> .或者，Typography 元素可能更适合在树的下方使用，即不是作为父元素，而是更像使用 p-tag 的方式。