Question

这个例子说明了我要做的事情。

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

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})，但仍无法找到解决方案=（

Answer 1

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

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



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

Answer 2

这一行存在问题：

return <{ component } key= { i } />

Component是一个实例，这是JSX，当你将组件放在{}括号中时，它意味着你将它作为JavaScript变量。将此行写为：

return <Component key={i} />

反应渲染动态内部组件

2 个答案: