危險lySetInnerHTML具有多個html條目

Question

在reactjs我們有這個奇妙的屬性dangerouslySetInnerHTML。

我有一種情況，我從CMS的多個富文本字段獲取值，當然這些值包含<p>標籤和其他HTML好東西。

現在我有一個div與每場的dangerouslySetInnerHTML屬性。

這會導致一些樣式問題，因爲我的樣式看起來像p + p { margin-top: 16px }，它們之間有<div>而被打亂。

React是否有辦法將__html中的多個對象放入dangerouslySetInnerHTML屬性中？

---

我目前有：

// ... 
<div dangerouslySetInnerHTML={{__html: CMSObject.RichtText1}}></div> 
<div dangerouslySetInnerHTML={{__html: CMSObject.RichtText2}}></div> 
<div dangerouslySetInnerHTML={{__html: CMSObject.RichtText3}}></div> 
// ... 

我希望我能以某種方式做：

// ... 
<div dangerouslySetInnerHTML={ 
    {__html: [ 
     CMSObject.RichtText1, 
     CMSObject.RichtText2, 
     CMSObject.RichtText3 
    ]} 
}></div> 
// ... 

Answer 1

您可以使用字符串插值，並將它們結合在一起

const html = `${text.textOne} ${text.textTwo} ${text.textThree}`; 
<div dangerouslySetInnerHTML={{__html: html}}/> 

我製作了一支筆來展示這一點。

http://codepen.io/finalfreq/pen/VKPXoN

您可以使用此相同的想法，並映射在所述對象鍵和值，所以你不必手動將在每一個文本塊

const html = []; 
// using lodash forin 
_.forIn(text, function(value, key) { 
    html.push(value); 
}) 

// using native javascript 
Object.keys(text).forEach((key)=> html.push(text[key])) 

<div dangerouslySetInnerHTML={{__html: html.join('')}}/>