危险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('')}}/>