Question

我试图根据ID动态提取组件，但即使我的函数返回正确的JSX，它也不会在我的render方法中转换为Component。

    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方法中传递。

我做错了什么？我从modules文件夹中导入index.js文件中的模块。

从＆＃39; ../ components / modules＆＃39;

导入*作为模块

提前多多感谢！：）

Answer 1

您的代码目前正在将'Modules.module1'之类的字符串传递给React.createElement，而不是对模块Module.module1本身的引用。您需要将模块名称转换为Modules import：

上的引用

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

您错过了return statement和{}

尝试这样

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

React - 由函数返回的JSX不会转换为Component

2 个答案: