react-ssr-无法渲染dangerouslySetInnerHTML

问题描述

当需要在后端渲染html富文本时，发现如果 dangerouslySetInnerHTML 存在于一个独立的 <div> 标签里时，会渲染出一个空的 <div></div>

解决办法

在该<div dangerouslySetInnerHTML>标签外，再套一层 <div>

• before:

  1 2 3 4 5

  <div> <h1>产品名称：{title}</h1> <p>产品描述</p> <div dangerouslySetInnerHTML={{__html: Description}}/> </div>

• after:

  1 2 3 4 5 6 7

  <div> <h1>产品名称：{title}</h1> <p>产品描述</p> <div> <div dangerouslySetInnerHTML={{__html: Description}}/> </div> </div>

这里有一个ssr的demo可供参考：https://github.com/OpenDemo/demo-umi-ssr

问题原因

TODO 需要研究下react/umi对dangerouslySetInnerHTML的渲染原理