javascript - 在 ReactJS 中动态添加子元素

Question

我有一个容器元素，我希望允许用户选择一个小部件列表(每个小部件都不同)，用户可以选择将其添加到容器中。

我有以下 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 语法添加它们。

Answer 1

如果您可以访问组件类，则可以将其分配给任何大写的变量名称并通过 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}/>
        );
    });
}