ReactjsはJSON</p> <pre><code>var componentConfig = { content: { type: "ContentContent", data: "content"}, new_content: { type: "ContentFormContent", data: "content"} } </code></pre><p>ではrendercomponentを反応させるように、私は、次の設定を有する動的JSONコンフィグ

Question

に基づいてコンポーネントをレンダリングし、それがレンダリング反応する動的コンポーネント名を渡すことが可能です。

例えばContentFormContentを直接置くのではなく、このレンダリングコンポーネントでは、json configからデータを渡すことができます。ループすることもできます。 JSONファイルからその「タイプ」に基づいて

React.renderComponent(<ContentFormContent data={[componentConfig.new_content.data]} />, body); 

だから私は、JSONの設定でページのリストを持っており、特定のNAVの選択に基づいてます私はコンポーネントをレンダリングします

Answer 1

JSX

<ContentFormContent data={[componentConfig.new_content.data]} /> 

単にので、あなたはその関数の呼び出ししかし、あなたリクを作ることができ

ContentFormContent({data: [componentConfig.new_content.data]}) 

にコンパイルe。この場合、それは可能なすべてのコンポーネントのリストを作成し、componentはあなたの例の配列から要素である場合

var allComponents = { 
    ContentContent: ContentContent, 
    ContentFormContent: ContentFormContent 
}; 

// (later...) 
React.renderComponent(allComponents[component.type]({data: component.data}), body); 

ような何かをするために、おそらく最も便利です。

Answer 2

React.renderComponentは（） https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations

は、あなたが何かやることReact.render（）を使用して、廃止されました：

var loadReactModule = function ($root, type, data) { 
    var ContentContent= React.createClass({ 
     render: function() { 
      return (
       <input type="text" placeholder="My Module-Input"/> 
      ); 
     } 
    }); 

    var ContentFormContent= React.createClass({ 
     render: function() { 
      return (
       <form></form> 
      ); 
     } 
    }); 

    var allComponents = { 
     ContentContent: ContentContent, 
     ContentFormContent: ContentFormContent 
    }; 

    if (type in allComponents) { 

     $root.each(function (index, rootElement) { 
      React.render(React.createElement(allComponents[type]), {data:data}, rootElement); 
     }); 
    } 
};