名前を使用してレンダリングコンポーネントを反応させよう

Question

React.jsを試していて、それは本当にうまくいっています。

React.render(
    <Container implComponent="somePredefinedVariable" />, 
    document.getElementById('content') 
); 

これは構文エラーのために動作しません：implComponentはそうのように渡されたと仮定すると、

var Container = React.createClass({ 
    render: function() { 
     <{this.props.implComponent}/> 
    } 
}); 

：そうのような他のクラスにクラスを注入することができる場合、私は疑問に思って。私はなぜ簡単に理解することができます。

つまり、名前に基づいて他のクラスにクラスを注入したいと思います。これは可能ですか？どうやってやるの？

Answer 1

あなたは近くにいました。コンポーネントクラスを渡す必要があります（文字列ではありません）。そして、タグ構文が既に変数を取るので、{}を取り除きます。レンダリングからノードを返すことも忘れないでください。

var Container = React.createClass({ 
    render: function() { 
     return <this.props.implComponent /> 
    } 
}); 

React.render(
    <Container implComponent={SomePredefinedVariable} />, 
    document.getElementById('content') 
); 

あなたが基本的なDOM要素を渡したい場合は、変換結果

var Container = React.createClass({displayName: "Container", 
    render: function() { 
     return React.createElement(this.props.implComponent, null) 
    } 
}); 

ReactDOM.render(
    React.createElement(Container, {implComponent: SomePredefinedVariable}), 
    document.getElementById('content') 
); 

ReactDOM.render(
    React.createElement(Container, {implComponent: "div"}), 
    document.getElementById('content') 
); 

考えてみれば、あなたはこれが理にかなっている文字列

を使用したいです