HTML反応し、ES6テンプレートリテラル

私はコンポーネントにいくつかのテキストを渡している：HTML反応し、ES6テンプレートリテラル

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

それは確かに動作することはできませんが、私はそれがうまく私の意図を示し思いますが。どのようにそれを動作させるためにどのようなアイデア？

出典

2016-11-07 Stanley Luo

XSSの脆弱性が存在するため、文字列化されたHTMLをコンポーネントに渡すことはできません。あなたはその後、HTMLをレンダリングする必要がある場合は

は、あなたは、ブラウザDOMにinnerHTMLプロパティを使用するための取り替えに反応さdangerouslySetInnerHTML source:

dangerouslySetInnerHTML

を使用する必要があります。一般的に、コードからHTMLを設定するのは危険です。これは、誤ってユーザーをクロスサイトスクリプティング（XSS）攻撃にさらすことが容易なためです。したがって、Reactから直接HTMLを設定することはできますが、dangerouslySetInnerHTMLとタイプし、__htmlキーでオブジェクトを渡す必要があります。たとえば：

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

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

出典

2016-11-07 03:19:57

ああをレンダリングするでしょうMyComponentのchildrenプロパティ

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

経由でアクセス可能です。これを使うのは避けたいと思います。私のテキストを単に太字にする方法はありますか？ –

テキストがユーザーの入力に由来しない場合（たとえば、ハードコードされている場合など）、dangerouslySetInnerHTMLを使用しても問題ありません。 –

@StanleyLuoここに反応コンポーネントがあります。https://github.com/bvaughn/react-highlight-words ＃使用法 –

はこのためにdangerouslySetInnerHTMLを使用しないでください。それは反パターンです。

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

2つのspanと1 strong要素は、私は素早く答えてくれてありがとうを参照してください

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

出典

2016-11-07 04:28:14 naomik

HTML反応し、ES6テンプレートリテラル

答えて

関連する問題