dangerouslySetInnerHTML с несколькими записями html

Question

В reactjs у нас есть этот замечательный атрибут dangerouslySetInnerHTML.

У меня есть ситуация, когда я получаю значения из нескольких полей богатого текста из CMS, которые, конечно же, упакованы с тегами <p> и другими лакомствами HTML.

Прямо сейчас у меня есть один div с атрибутом dangerouslySetInnerHTML для каждого поля.

Это вызывает некоторые проблемы с дизайном, так как у меня есть стиль, который выглядит примерно как p + p { margin-top: 16px }, который нарушается, если между ними находится <div>.

Есть ли способ в отношении нескольких объектов с __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('')}}/>