[英]How to render variable components in React.js
有人可以帮我用变量名渲染React组件吗? 例如,我有一个导入3个其他组件的组件,并且我想遍历组件数组并渲染它们。 非常粗糙的伪代码:
import component1 from '...';
import component2 from '...';
import component3 from '...';
const component_list = ['component1', 'component2', 'component3']
renderComponents() {
return this.component_list.map((component) {
<div>
<{component} />
</div>
});
}
使用组件类(而不是字符串)更新组件列表,并注意自定义组件必须大写 :
import component1 from '...';
import component2 from '...';
import component3 from '...';
const component_list = [component1, component2, component3];
renderComponents() {
return this.component_list.map((Component) => {
<div>
<Component />
</div>
});
}
import component1 from '...';
import component2 from '...';
import component3 from '...';
const component_list = [component1, component2, component3]
renderComponents() {
return component_list.map((component) => {
<div>
<component />
</div>
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.