コンテナコンポーネントからプレゼンテーションコンポーネントへのReact-passオブジェクト

Question

プレゼンテーションコンポーネントにコンポーネントのIDに基づいて動的にコンポーネントを追加しようとしています。私はこのすべてに新しいので、私は自分自身にとってそれを難し​​くしている可能性があります。ここで

は私のコンテナコンポーネントのコードです：

class TemplateContentContainer extends Component { 
     constructor() { 
      super() 

      this.fetchModule = this.fetchModule.bind(this) 
      this.removeModule = this.removeModule.bind(this) 
      this.renderModule = this.renderModule.bind(this) 
     } 

     componentWillReceiveProps(nextProps) { 
      if(nextProps.addAgain !== this.props.addAgain) // prevent infinite loop 
      this.fetchModule(nextProps.addedModule) 
     } 

     fetchModule(id) { 
      this.props.dispatch(actions.receiveModule(id)) 
     } 

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

     } 

     removeModule(moduleRemoved) { 
      console.log('remove clicked' + moduleRemoved) 
      this.props.dispatch(actions.removeModule(moduleRemoved)) 
     } 

     render() { 
      return (
       <div> 
        <TemplateContent 
         addedModule={this.props.addedModule} 
         templateModules={this.props.templateModules} 
         removeModule={this.removeModule} 
         renderModule={this.renderModule} 
        /> 
       </div> 
      ) 
     } 
    } 

と表現的コンポーネントのコード：

const TemplateContent = (props) => { 

     let templateModules = props.templateModules.map((module, index) => (
      <li key={index}> 
       {props.renderModule(module)} 
       <button onClick={props.removeModule.bind(this, index)}> 
        remove 
       </button> 
      </li> 
     )) 

     return (
      <div> 
       <ul> 
        {templateModules} 
       </ul> 
      </div> 
     ) 
    } 

renderModule関数が返すオブジェクトが、それはプレゼンテーションコンポーネントに渡されていたときにもう動作しません（classNameとして渡されない限りオブジェクトを返します）

私はmoからモジュールをインポートしています私はindex.jsファイル

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

にそれらのすべてをエクスポートdulesフォルダは任意のヘルプは高く評価されるだろう、それは理にかなって願っています。

ありがとうございます！

Answer 1

ファイルを簡単に処理できるように再構成することをお勧めします。

あなたのコンテナコンポーネントは次のようになり、レンダリングした場合：

render() { 
     return (
      <div> 
       <ul> 
        {this.props.templateModules.map(module => (
        <ChildComponent onRemove={this.removeModule} module={module} /> 
       )} 
       </ul> 
      </div> 
     ) 
    } 

だけ削除をクリックし、モジュールの表示データを扱うことができるあなたの子コンポーネント

EDIT：

マイ悪い、私はちょうどあなたの問題を誤解しました。 私はあなたがレンダリングするコンポーネントの名前を連結するのではなくに従ってコンポーネントにIDをマップしますので、あなたのコンテナコンポーネントは次のようになります。

また

getChildComponent (id) { 
    const foo = { 
     foo:() => { 
     return <Foo onRemove={this.removeModule} /> 
     }, 
     bar:() => { 
     return <Bar onRemove={this.removeModule} /> 
     } 
    } 

    return foo[id] 
} 

render() { 
    return (
     <div> 
      <ul> 
       {this.props.templateModules.map(module => (
       {this.getChildComponent(module.id)()} 
       )} 
      </ul> 
     </div> 
    ) 
} 

あなたは多分react-を見ている必要がありますがあなたの発送を反応を還元する容器に移してください。