React dangerouslySetInnerHTML只有在div标签上使用时才能正常工作

Question

我环顾四周，找不到任何关于此的信息。我的问题是这个。当我对这样的代码做出反应时：

this.props.description = "<p>this is a test</p>";

和

<p class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;"></p>
<p>this is a test</p>

通过dangerouslySetInnerHTML添加的html在以下描述中都没有添加：

this.props.description = "<span>this is a test</span>";

这似乎只发生在传递给dangerouslySetInnerHTML的字符串包含块级元素时。如果传递的字符串是：

<p class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;">
    <span>this is a test</span>
</p>    

它正常工作并输出：

<div ref="description" className="description" dangerouslySetInnerHTML={{__html: this.props.description}}></div>

如果我更改代码，我使用div标签而不是像这样的p标签：

<div class="description" data-reactid=".0.0.2.2" style="height: 120.639999389649px;">
    <p>this is a test</p>
</div>

然后dangerouslySetInnerHTML与块级元素一起正常工作并输出：

{{1}}

Answer 1

React没有这样做，你的浏览器是。将<p>元素放在另一个<p>元素中是无效的HTML ^†，因此您的浏览器会做唯一有意义的事情，即放置第二个{{1}在第一个之后。

您可以在此代码段中看到完全相同的行为，该代码段不使用任何JavaScript：

<p>

p { width: 10em; height: 1em; }
#outer { border: 1px solid blue; }
#inner { border: 1px solid green; }

^†在HTML5规范中，<p id="outer"> <p id="inner">Hello</p> </p>元素的内容模型被命名为“Phrasing content”：

  

短语内容是文档的文本，以及在段落内标记该文本的元素。

Take a look at the spec获取在<p>元素内有效的元素列表。