function函数返回的JSX不会被转换成组件
function函数返回的JSX不会被转换成组件
提问于 2017-03-23 07:34:38
但是，即使我的函数返回正确的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文件中的模块。
从‘./组件/模块’导入*作为模块
提前谢谢！)
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-23 08:16:31
您的代码目前正在将像'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
}Stack Overflow用户
发布于 2017-03-23 07:37:21
为此，您缺少了return statement和{}
像这样试试
{this.props.templateModules.map((module, index) =>{
return <TemplateContent
removeModule={this.removeModule}
key={index}
>
{this.renderModule(module)}
</TemplateContent>
})}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42980588
复制相关文章
点击加载更多
相似问题
SSL-安装apache2时出错
使用NGINX和SSL时出现的问题
创建分区时出错
创建模块时出错
创建debian包时出错。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
