innerHTMLのJSX形式を設定する方法

Question

だから私はこのコードを与えられた：もちろん

render() { 
    console.log(this.props, 'ey'); 
    const var1 = "<div className={{blahblah}} style={{width: '10px'}}>{textvar}</div>" 


    return (
    <div dangerouslySetInnerHTML={{ __html: `${var1}` }}> 
    </div> 
); 
} 

あくまで一例ですが、var1はしかし、1つは、それらをレンダリングすること、JSX形式のhtmlファイルの大きな塊でなければなりませんそれらは正規のhtmlに変換されません。

また、componentDidMountのrefを介してinnerHTMLを設定しようとしましたが、同じ問題が発生します。

これは、それがレンダリングする際にどのように見えるかです：

<div class="blahblah style="width: 10px"}}>the variable text</div> 

すべてのヘルプは大歓迎です。ありがとう！

Answer 1

あなたは（仕様により不正確というテンプレートリテラル） ES6 interpolated string literalsを使用するには、この操作を行う必要があり

：

<div dangerouslySetInnerHTML={{ __html: `${var1}` }}> 

しかし、これは単純に次のようになります。しかし

<div dangerouslySetInnerHTML={{ __html: var1 }}> 

、内側のためのあなたの文字列にhtmlの場合、必要なものがblahblahとtextvarの変数の値を使用する場合は、補間された文字列リテラルを使用することができます。 ReactはJSXとして処理するのではなく、内側のhtmlを設定するだけなので、classNameの代わりにclassを使用する必要があることに注意してください。classNameはJSX専用です。

const var1 = `<div class=${blahblah}>${textvar}</div>`; 

クラスを使用している場合は、styleキーワードも使用する必要はありません。 CSSの幅を設定するだけです。

working example of the above on CodePenが表示されます。