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的形式传递，例如然后它返回对象）

我正在从modules文件夹导入模块，我将它们全部导出到index.js文件

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

希望有意义，任何帮助都会受到高度赞赏。

提前多多感谢！

Answer 1

我建议重新构建文件，以便于处理。

如果您的容器组件呈现如下所示：

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

您的子组件只能处理删除点击和显示模块数据

编辑：

我的坏，我只是误解了你的问题。我会将id映射到相应的组件，而不是连接要渲染的Component的名称，因此容器组件看起来像这样：

 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-redux并将您的调度移至react-redux容器。

React - 将对象从Container Component传递给Presentational Component

1 个答案: