React中dangerouslySetInnerHTML渲染后层级问题

Question

问题描述在React-router中使用dangerouslySetInnerHTML遇到刷新后层级发生变化。场景核心代码：<p key='insert-dangerously' dangerouslySetInnerHTML={{__html:state.postData.post}}></p>这里的postData是异步从数据库获取的,通过setState实现动态更新 view层。这段代码正常使用时是没有什么问题的。问题的出现是在主动刷新页面问题出现正常访问render:<p data-reactid=".0.0.1.0.0.0.0.$1.1.$insert-dangerously">     <h4>主题</h4>     <p>lailalalal...</p>     <p>123456</p></p>重新setState数据层级也没有发生变化。刷新页面后层级render异常：<p data-reactid=".0.0.1.0.0.0.0.$1.1.$insert-dangerously"></p><h4>主题</h4><p>lailalalal...</p><p>123456</p>如果有大神可以来回答一下么? 如果没有的话,待我研究完源码后再来分解

Answer 1

因为不可以用<p/>标签包裹<h4/>。

<p/>是文本级的标签，只能放置文本、图片或表单元素。

如果在尝试在<p/>中包裹这种容器级的标签（如div, h4），浏览器会自动封闭p标签。