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

Question

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

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

和

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

通过dangerouslySetInnerHTML添加HTML是在既没有这样的说明补充说：

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

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

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

它正常工作，并将其输出：

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

，如果我的代码，以便更改我用div标签，而不是AP标签是这样的：

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

然后危险地SetInnerHTML与块级元素正常工作并输出：

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

Answer 1

React没有这样做，你的浏览器是。将<p>元素放在另一个<p>元素内不是有效的HTML ^†，所以您的浏览器做的唯一有意义的事情，就是在第一个之后放置第二个<p>。

你可以看到在这个片段中完全相同的行为，不使用任何JavaScript：

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

<p id="outer"> 
 
    <p id="inner">Hello</p> 
 
</p>

^†在HTML5规范的<p>元素的内容模型被命名为“短语内容”：

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

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