Question

我有一个动态渲染组件，它按如下方式渲染子组件。我现在在另一个对象中创建组件，我无法重写渲染部分。

渲染

{this.props.components.map((Component, i) => (
  <div className="formGroup" key={i}>
     <Component id={Component.componentName + "_id"} name={Component.componentName} ref={component => { this.componentRefs.push(component); console.log("Loaded component " + component.componentName); }} key={i} />
  </div>
))}

现在我有一些粗暴的组件，例如

this.props.components = [MyComponent1, MyComponent2];

然而，我改变了这种方式，我将组件包裹在一个对象中，例如

this.props.components = [{type: MyComponent1, name:"yolo"}, {type: MyComponent2, name:"yala"},];

因此组件本身位于此对象type属性中。

我没有设法重新编写此组件的渲染部分，以循环此类型属性而不是对象本身。

Answer 1

在映射上解析对象的type属性：

{this.props.components.map(({ type: MyComponent }, i) => (
    <div className="formGroup" key={i}>
        <MyComponent id={Component.componentName + "_id"}
            name={Component.componentName}
            ref={component => {
                this.componentRefs.push(component);
                console.log("Loaded component " + component.componentName); 
            }}
            key={i} />
    </div>
))}

按对象属性的Javascript数组映射

1 个答案: