React - 函数返回的 JSX 不会转换为组件

Question

我正在尝试根据 ID 动态提取组件，但是即使我的函数 returns 是正确的 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>
        )
    }

我的模板内容代码：

    const TemplateContent = (props) => {

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

    }

所以在浏览器中我可以看到而不是对象。但是，如果我分配给 returnModule，它会正确呈现。

即使我可以在控制台中看到从变量 AddModule 创建的对象，它仍然不会在渲染方法中传递。

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

从'../components/modules'

导入 * 作为模块

提前致谢！ :)

Answer 1

您缺少 return statement 和 {}

像这样尝试

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

Answer 2

您的代码当前正在将 'Modules.module1' 之类的字符串传递给 React.createElement，而不是对模块 Module.module1 本身的引用。您需要将模块名称转换为对 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
}

React - 函数返回的 JSX 不会转换为组件

React - JSX returned by a function doesn't get converted into a Component

reactjs

react-jsx

jsx