HTML in React und ES6 Vorlage Wörtliche

Question

ich einen Text an eine Komponente übergeben:

<Component 
text={`text with <span style={{fontWeight:bold}}>${thisPart}</span> emphasized`} 
/> 

Obwohl es kann sicherlich nicht funktionieren, aber ich denke, es ist gut meine Absichten zeigt. Irgendeine Idee, wie es funktioniert?

Answer 1

Sie können nicht Zeichenfolge HTML an eine Komponente übergeben, da es XSS-Schwachstellen eröffnet.

Wenn Sie müssen machen html, dann sind Sie dangerouslySetInnerHTML

source:

dangerouslySetInnerHTML verwenden, erforderlich Ersatz des wird Reagieren für innerHTML- im Browser DOM verwenden. Im Allgemeinen ist das Festlegen von HTML aus Code riskant, da es leicht ist, Ihre Benutzer versehentlich einem Cross-Site-Scripting-Angriff (XSS) auszusetzen. So können Sie HTML direkt aus React setzen, aber Sie müssen dangerouslySetInnerHTML eingeben und ein Objekt mit einem __html-Schlüssel übergeben, um sich daran zu erinnern, dass es gefährlich ist. Zum Beispiel:

function createMarkup() { 
    return {__html: 'First · Second'}; 
} 

function MyComponent() { 
    return <div dangerouslySetInnerHTML={createMarkup()} />; 
} 

Answer 2

Sie dangerouslySetInnerHTML für diese nicht verwenden. Das ist ein Anti-Muster.

<MyComponent> 
<span>text with</span> 
<strong>{thisPart}</strong> 
<span>emphasized</span> 
</MyComponent> 

Die 2 span und 1 strong Elemente sind über die MyComponent children Eigenschaft

class MyComponent extends React.Component { 
    render() { 
    return (
     <div> 
     <p>some text</p> 
     <p>{this.props.children}</p> 
     </div> 
    ) 
    } 
} 

machen würde

<div> 
    <p>some text</p> 
    <p> 
    <span>text with</span> 
    <strong>this part</strong> 
    <span>emphasized</span> 
    </p> 
</div>