我看到了这个。它在抱怨什么并不神秘:
Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div.
我是SomeComponent和SomeOtherComponent的作者。但后者使用了外部依赖项(来自react-tooltip的ReactTooltip)。这可能并不一定是一个外部依赖，但它让我尝试在这里讨论它是“一些超出我控制的代码”。
鉴于嵌套组件工作正常(看起来)，我应该对这个警告有多担心呢?无论如何，我该如何改变它(如果我不想重新实现一个外部依赖)?有没有我还不知道的更好的设计?
为了完整起见，下面是SomeOtherComponent的实现。它只是渲染this。props。值，当鼠标悬停时:显示“一些工具提示消息”:
class SomeOtherComponent extends React.Component {
constructor(props) {
super(props)
}
render() {
const {value, ...rest} = this.props;
return <span className="some-other-component">
<a href="#" data-tip="Some tooltip message" {...rest}>{value}</a>
<ReactTooltip />
</span>
}
}
谢谢你！
我通过使用材质UI组件得到了这个警告，然后我测试了component="div"作为下面代码的道具，一切都变得正确:
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
<Typography component="span">
<Grid component="span">
Lorem Ipsum
</Grid>
</Typography>
实际上，这个警告发生了，因为在Material UI中，Grid组件的默认HTML标签是div标签，默认Typography HTML标签是p标签，所以现在警告发生了，
Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>
详细信息(以及一些关于警告的HTML理论):<div>不能作为<p>消息的后代显示，因为<p>标签的允许内容是根据Phrasing Context设置的标准，其中不包括<div>标签。更多细节请参见链接。
这是浏览器的限制。你应该在App的渲染方法中使用div或article之类的东西因为这样你就可以在里面放任何你喜欢的东西。段落标记被限制为只包含一组有限的标记(主要是用于格式化文本的标记)。段落中不能有div
<p><div></div></p>
不是有效的HTML。根据规范中列出的标记省略规则，<p>标记由<div>标记自动关闭，这使得</p>标记没有匹配的<p>。浏览器可以通过在<div>之后添加一个打开的<p>标签来尝试纠正它:
<p></p><div></div><p></p>
您不能将<div>放在<p>中，并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML，它们将表现得更好。
你可以把<div>放在<div>里面，所以如果你把<p>替换为<div class="p">并适当地设置样式，你就可以得到你想要的。
详细信息(以及一些关于警告的HTML理论):<div>不能作为<p>消息的后代显示，因为<p>标签的允许内容是根据Phrasing Context设置的标准，其中不包括<div>标签。更多细节请参见链接。
警告出现只是因为演示代码有:
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box p={3}> // <==NOTE P TAG HERE
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
像这样修改它就可以了:
function TabPanel(props) {
const {children, value, index, classes, ...other} = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Container>
<Box> // <== P TAG REMOVED
{children}
</Box>
</Container>
)}
</div>
);
}
材质UI !!!!!
我花了大量的时间，但感谢Alex C的回答——>，它给出了一个非常简单而聪明的解决方案
document.querySelectorAll(" p * div ")
所以让我惊讶的是，导致这个问题的是Material UI DialogContentText组件DialogContentText API
所以只需使用component={'span'}来解决这个问题(它不会影响样式)
<DialogContentText id="alert-dialog-inputs" component={'span'}/>
如果你不能解决问题，就用底部方法
你会有这个问题，因为你在文本标签中打开网格标签或div，它可能是假的。
例如，我写的部分代码有问题。看看它:
<Typography>
text
<Grid>
</Grid>
</Typography>
小心我在版式标签中打开网格标签。因此，如果我们在typography标签中使用Open Grid标签，则为假。
据我所知，当我们在排印标签中打开时，我们偏离了MUI标准。
所以为了最好的方式，你可以使用以下代码:
<Grid>
<Typography>
text
</Typography>
</Grid>
如果你使用这个代码，你不会有任何问题。
因此，如果你再次有问题
你必须检查组件和
查看在哪个组件中没有选择正确的模式。
你应该检查:
跨度字体h1 h2 h3 h4 h5 h6 p
希望我能帮到你。
