如何避免React的dangerouslySetInnerHTML 把<code>内的<br/>过滤掉？

Question

在使用React的dangerouslySetInnerHTML时，发现会把<code>内的<br/>过滤掉,

// 为了方便先把contentHtml写死了
const contentHtml = '<pre data-lang="javascript" class="lang-javascript"><code class="lang-javascript">const b = 2;<br/>const a = 1;<br/><br/></code></pre><p></p>';

// 使用时
<div className={styles.contentContainer} dangerouslySetInnerHTML={{ __html: contentHtml }} />

结果<br>被过滤掉了，code内也没有换行效果

如果手动编辑html，插入<br>, 就是期望的结果，请问如何让<br>不被过滤掉呢？

谢谢🙏

Answer 1

React 并不会过滤。你用了什么代码美化库吧，是它把 br 给过滤了。

Answer 2

https://codepen.io/anon/pen/Y...
这个例子里react并没有过滤br，反而react推荐 用br代替/n