2016-12-01 14 views
-1

In haben wir dieses wunderbare Attribut dangerouslySetInnerHTML.dangerousSetInnerHTML mit mehreren HTML-Einträgen

Ich habe eine Situation, wo ich Werte aus mehreren Rich-Text-Felder von einem CMS, die natürlich mit <p> Tags und andere HTML-Goodies verpackt ist.

Jetzt habe ich eine div mit dem dangerouslySetInnerHTML Attribut pro Feld.

Dies verursacht einige Styling-Probleme, da ich Styling habe, sieht etwa so aus wie p + p { margin-top: 16px }, die durch eine <div> dazwischen unterbrochen wird.

Gibt es eine Möglichkeit in React mehrere Objekte mit __html in das dangerouslySetInnerHTML Attribut zu übergeben?


Was ich derzeit haben:

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

Was ich hoffe, dass ich irgendwie tun können:

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

Können Sie den entsprechenden Abschnitt Ihrer zeigen Code (und möglicherweise ein Beispiel für den HTML-Code, den Sie injizieren möchten)? Ich kann nicht verstehen, was Sie versuchen zu tun. –

+0

@JoeClay Bitte beachten Sie mein Update – diceler

+0

Warum der Downvote? – diceler

Antwort

1

Sie können String-Interpolation verwenden und kombinieren sie zusammen

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

Ich habe einen Stift gemacht, der das zeigt .

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

Sie können diese gleiche Idee verwenden und den Objektschlüssel und Werte abbilden über, so dass Sie nicht manuell in jedem Textabschnitt gelegt hatte

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('')}}/> 
+0

Arbeitete wie ein Charme. Vielen Dank. – diceler