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标签。