javascript - React中dangerouslySetInnerHTML渲染后层级问题

问题描述

问 题

问题描述

在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>

如果有大神可以来回答一下么? 如果没有的话,待我研究完源码后再来分解。

解决方案

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

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

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

这篇关于javascript - React中dangerouslySetInnerHTML渲染后层级问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！