反应。如何在不出现警告的情况下将网格插入 TabPanel？

Question

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

警告：validateDOMNesting(...)：div 不能显示为 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 标签的相同方式。