React - 関数から返されたJSXがコンポーネントに変換されない

Question

IDに基づいてコンポーネントを動的に取得しようとしていますが、関数が正しいJSXを返しても、方法。

renderModule(moduleId) { 
     let AddModule = "Modules.module" + moduleId 
     let returnModule = <AddModule/> 
     // console.log(returnModule) 
     return returnModule 
    } 

    render() { 
     return (
      <div> 
       <ul> 
        {this.props.templateModules.map((module, index) => 
         <TemplateContent 
          removeModule={this.removeModule} 
          key={index} 
         > 
          {this.renderModule(module)} 
         </TemplateContent> 
        )} 
       </ul> 
      </div> 
     ) 
    } 

マイTemplateContentコード：

const TemplateContent = (props) => { 

     return (
      <div> 
       {props.children} 
      </div> 
     ) 

    } 

ので、ブラウザで私は、オブジェクトの代わりに見ることができます。しかし、私がreturnModuleに割り当てると正しくレンダリングされます。

変数AddModuleから作成されたオブジェクトをコンソールで見ることはできますが、それでもrenderメソッドでは渡されません。

私は間違っていますか？私はモジュールフォルダからindex.jsファイルに自分のモジュールをインポートしています。 「../components/modules'

おかげからモジュールとして

輸入*事前にたくさん！ :)

Answer 1

あなたのコードは、現在のモジュールModule.module1に'Modules.module1'React.createElementに、いない参照のような文字列を渡しているようにそれを試してみてくださいその

ためreturn statementと{}が欠落しています自体。あなたはModulesインポート時に参照するモジュール名を変換する必要があります。

import * as Modules from '../components/modules' 

// ... 

renderModule(moduleId) { 
    // Will be a reference to the component, not a string 
    let AddModule = Modules[`module${moduleId}`] 
    let returnModule = <AddModule/> 
    return returnModule 
} 

Answer 2

あなたはこの

{this.props.templateModules.map((module, index) =>{ 
         return <TemplateContent 
          removeModule={this.removeModule} 
          key={index} 
         > 
          {this.renderModule(module)} 
         </TemplateContent> 
        })}