☰

React の JSX 構文における二重中括弧の目的は何ですか? 質問する

tag-icon • tag-icon javascript reactjs
React の JSX 構文における二重中括弧の目的は何ですか? 質問する

からreact.js チュートリアル二重中括弧の使い方は次のようになります。

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

そして、2番目のチュートリアル「Reactで考える」:

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

しかしReact JSX ドキュメント二重中括弧については説明も言及もありません。この構文 (二重中括弧) は何のためにあるのでしょうか? また、jsx で同じことを表現する別の方法があるのでしょうか、それともこれは単にドキュメントから省略されているだけなのでしょうか?

ベストアンサー1

これはプロパティ値にインライン化されたオブジェクトリテラルです。

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

おすすめ記事