Material UI表格内点击Collapse触发p标签嵌套DOM校验报错如何解决

你遇到的validateDOMNesting(...): <p> cannot appear as a descendant of <p>报错完全是HTML结构不符合规范导致的，和Collapse组件本身无关：

• 你在Collapse内部写了嵌套的p标签结构：外层<p>标签里面直接包裹了<h4>块级元素和另一个<p>标签，违反了HTML规范中「p标签只能包含行内元素，不能嵌套其他块级元素（包括p、h1~h6、div等）」的要求
• 由于你给Collapse设置了unmountOnExit属性，折叠状态下内部DOM不会挂载，只有点击展开时才会渲染内部内容，因此报错只会在点击Collapse时触发

修改Collapse内部的错误嵌套结构即可，将原来的错误代码：

<h4>קצת על העסק</h4>
<p>{row.aboutBusiness}
    <h4>דרישות</h4>
    <p>{row.requirements}</p>
</p>

调整为独立的平级标签结构：

<h4>קצת על העסק</h4>
<p>{row.aboutBusiness}</p>
<h4>דרישות</h4>
<p>{row.requirements}</p>

修改后重新运行项目即可消除报错。

内容的提问来源于stack exchange，提问作者YanivCode