文字列をjsxに変換するには？

Question

この文字列をjsxに変換するにはどうすればよいですか？この文字列をHTML要素として表示します。

this.setState({ 
    input: "<h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3>" 
}); 

render() { 
    return <div>{this.state.input}</div> 
} 

Answer 1

JSXでHTML要素を引用する必要はありませんが、HTML要素には1つの親しか持てません。引用符を取り除き、divを変数に移動すると、すべて設定されます。だから、

：

this.setState({ 
    input: <div><h1 id="heading">Heading</h1> <h2 id="sub-heading">Sub-heading</h2> <h3 id="another-deeper-heading">Another deeper heading</h3></div> 
}); 

render() { 
    return this.state.input 
} 

でも、私はあなたがこのことから得るかわからないんだけど。ベストプラクティスはpropsとstateに単純なデータを保存し、stateではなく、HTMLラッパーをレンダリング関数に置くことです。