反応レンダリング動的コンポーネントインサイド他のコンポーネントのレンダリング機能

Question

私は反応を使用してWebアプリケーションを開発しようとしており、問題があります。 myコンポーネントは 'exists component name'を取得し、この新しいコンポーネントを現在のコンポーネントのレンダリング機能内でレンダリングしようとします。

私の現在の構成要素は、それが私の作品ではない機能

render(){ 

    let Xxx = null; 
    if(this.props.onHex){ 
     console.log(this.props.onHex); 
     Xxx = <this.props.onHex /> 
    } 

    return(
     <div className="myClass"> 
      <div className="anotherClass"> 
       {Xxx} 
      </div> 
     </div> 
    ); 
    } 
} 

をレンダリングし、コンソールログには、新しいコンポーネント「ユニット」の名前を返します。 Xxx = <this.props.onHex />をこのXxx = <Unit />に置き換えると、ユニットのレンダー機能が動作してレンダリングされます。

反応が反応しないように見える<Unit/>をコンポーネントとして認識します。 私が間違っていることは助言してください。

私の単位コード：

export default class Unit extends Component{ 

    render(){ 
     return(
      <div>test</div> 
     ); 
    } 
} 

UPDATE：私はそれが私の作品const XxxName = Unit; Xxx = <XxxName />;を使用しますが、私は、文字列からコンポーネントをレンダリングすることができるようにしたいとき（私は、JSONからこの文字列を得た） 。 私は可能なすべてのコンポーネントをこの状況でファイル内に作成して配列や何かにロードして文字列で取得することができると思いますが、それを生かすことができるものではありません。別のフォルダ（各コンポーネントの個別のファイル）から半分の解決策になります。しかし、私はまだ文字列からコンポーネントをロードする方法を探しています。別の同様の問題を持つ

jsFiddle http://jsfiddle.net/dhjxu5oL/

UPDATE 2：今、私は希望のために各動的コンポーネントのメソッドを使用していますのために（私はそれが存在するかどうかわからない）私の目標に到達するための 私が見つけたわけではないエレガントな方法誰かがよりエレガントなソリューションで私に助言するだろう。それをチェック：React/JSX Dynamic Component Name

newExampleComponent() { 
    return <ExampleComponent />; 
} 

newComponent(type) { 
    return this["new" + type + "Component"](); 
} 

Answer 1

let Xxx = null; 
if(this.props.onHex){ 
    const XxxName = this.props.onHex; 
    Xxx = <XxxName />; 
} 

チェック例えば、このjsfiddle

---

UPDATE：

よる

React official docsにあなたは一般的なexpressioを使用することはできませんReact要素の型としてnを指定します。 要素のタイプを示すために一般式を使用する場合は、最初に大文字の変数に割り当てます。あなたは 小道具に基づいて異なるコンポーネントをレンダリングしたい場合には、多くの場合、 に来る：

ですから、まず、あなたがそれを使用することができるはず、大文字の変数にthis.props.onHexを割り当てる必要があります。

再び

---

UPDATE

あなたは文字列ではなく、コンポーネントへの参照を渡したいようです。

const xxx = this.props.onHex || ""; 
const XxxComp = eval(xxx); 
... 
return (<XxxComp />); 

は私が