は、私が使用してHTMLなどのコンポーネントの子をレンダリングし、私はそれが正常に動作したテキストを設定し 場合、dangerouslySetInnerHtmlを反応させることができますどのようにDangerouslySetInnerHTML

Question

反応するが、私は、HTML、このリターン[オブジェクトのオブジェクト]を

class App extends React.Component{ 
    render(){ 
    return(
     <div dangerouslySetInnerHTML={{__html: this.props.children}}> 

     </div> 
    ) 
    } 
} 

1) ReactDOM.render(
    <App> Test </App>, 
document.getElementById('root')); --- Works 


2) ReactDOM.render(
    <App> <p>Test</p> </App>, 
document.getElementById('root')); --- return [object Object] 

Link to JS Bin

Answer 1

として設定している場合コメントで説明したところでは、__htmlは文字列でなければならないが、<p>Test</p>から作成された反応コンポーネントを渡しているため、出力に[object Object]が出力されています。

なぜあなたはこれをやりたいのですが、文字列を渡す必要があるかどうかを求めていることは、まだ不明です。

<App>{"<p>Test</p>"}</App> 

または

<App children="<p>Test</p>" /> 

は両方とも同等であり、その後、__htmlの値になり、文字列、としてあなたのマークアップを渡す：

だからあなたは、次のいずれかを実行することができます。

---

注意！

JSXで書かれたReactコンポーネントではなく、通常のHTMLでのみ機能します。例えば

、この意志ない作品：

<App children="<Foo>Test</Foo>" />