React 渲染动态内部组件

这个例子说明了我正在尝试做的事情。

目标是拥有一个动态组件数组并将其渲染到屏幕上。我无法完成渲染部分。

import PropTypes from 'prop-types';
import React from 'react';
import MyComponent1 from './MyComponent1.jsx'
import MyComponent2 from './MyComponent2.jsx'

export default class KneatModalContent extends React.Component {

constructor() {
   super();
   this.components = [MyComponent1, MyComponent2];
}

render() {
  return (
  <div className='modal-contents'>
     {this.components.map(function (component, i) {
        return <{ component } key= { i } />
     })}
  </div>
)
}
}

我尝试将数组创建为[<MyComponent1/>, <MyComponent2/>]以及，尝试呈现为React.createElement(component, {key:i})但还是没找到解决办法=(

为了创建动态组件，您可以执行以下操作

constructor() {
   super();
   this.components = [MyComponent1, MyComponent2];
}



render() {
      return (
      <div className='modal-contents'>
         {this.components.map(function (Component, i) {
            return <Component key= { i } />
         })}
      </div>
    )
  }