对象属性的 Javascript 数组映射

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>
))}