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对象作为初始道具发送小部件的详细信息。

widgets:
[
  {
    title:'Widget1',
    id:'1'
  },
  {
  title:'Widget2',
  id:'2'
  }
]

我不确定如何自我声明地指定Widget？

另一个选项是使用父级的子属性，并使用非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}/>
        );
    });
}

在ReactJS中动态添加子元素

1 个答案: