我有一个容器元素,我希望允许用户选择一个小部件列表(每个小部件都不同),用户可以选择将其添加到容器中。
我有以下 WidgetContainer 代码:
export default class WidgetContainer extends React.Component {
constructor(props){
super(props);
console.log('WidgetContainer() : props=['+props+']');
}
render() {
var widgetsTmp = '';
if(this.props.data && this.props.data.widgets){
widgetsTmp = this.props.data.widgets.map(function(widget){
return (
<WidgetItem data={widget} key={widget.id}/>
);
});
}
return (
<div className='container'>
{widgetsTmp}
</div>
);
}
}
我在包含 WidgetContainer 的元素中设置 WidgetContainer 的属性,如下所示
<WidgetContainer data={section}/>
从我的商店中,我使用以下 JSON 对象作为初始 Prop 发送小部件的详细信息。
widgets:
[
{
title:'Widget1',
id:'1'
},
{
title:'Widget2',
id:'2'
}
]
我不确定如何以声明方式自行指定小部件?
另一个选项是使用父级的子级属性并使用非 JSX 语法添加它们。
最佳答案
如果您可以访问组件类,则可以将其分配给任何大写的变量名称并通过 JSX 正常渲染它。
var CapitalizedVariableName = lookupComponentClass(maybeBySomeString);
return <CapitalizedVariableName props={stuff} />;
因此,作为一个基本示例:
import Widget1 from "./widget1";
import Widget2 from "./widget2";
var widgets = {
'Widget1': Widget1,
'Widget2': Widget2
};
// ...
if(this.props.data && this.props.data.widgets){
widgetsTmp = this.props.data.widgets.map(function(widget){
var WidgetType = widgets[widget.type];
return (
<WidgetType data={widget} key={widget.id}/>
);
});
}
关于javascript - 在 ReactJS 中动态添加子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30412694/