危險地反應SetInnerHTML僅在div標記上使用時才能正常工作

Question

我環顧四周，找不到任何相關信息。 我的問題是這個。 當我有這樣的反應代碼：

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

和

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

通過dragonallySetInnerHTML添加的html均未添加如下描述：

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

這似乎僅在傳遞給dragonallySetInnerHTML的字符串包含塊級元素時才會發生。 如果傳遞的字符串是：

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>元素的內容模型被稱為“短語內容”：

短語內容是文檔的文本，以及在段落內級別標記該文本的元素。

查看在 <p>元素內有效的元素列表的規范 。