做出反应。如何在没有警告的情况下将 Grid 插入 TabPanel？

Posted 2023-02-22

【中文标题】做出反应。如何在没有警告的情况下将 Grid 插入 TabPanel？

【英文标题】：React. How can I insert a Grid into a TabPanel without warnings?

【发布时间】：2021-03-28 06:56:10

【问题描述】：

问题是不言自明的。我正在使用 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>

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

【问题讨论】：

您是否返回一个 作为您的 中的***组件？如果您这样做，您可能会考虑使用空尖括号 > 将其替换为片段

Grid 的p 属性应该做什么？我在grid api documentation 中看不到。

【参考方案1】：

您的代码基本上是正确的（假设您在此处未显示 TabContext、Tab、值等）。

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

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

【讨论】：

谢谢！这正是问题所在！ :D