React 渲染动态内部组件答案

【问题标题】：React Rendering Dynamic Inner ComponentsReact 渲染动态内部组件
【发布时间】：2017-12-06 05:04:26
【问题描述】：

这个例子说明了我想做什么。

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

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})，但仍然找不到解决方案=(

【问题讨论】：

您认为<{ component } /> 会发生什么。您不会像这样渲染任何其他组件，而是在它们出现时渲染它们，例如：<MyComponent1 />。一个小小的挑剔，我不会将组件创建为实例属性。它们可以是默认属性或 initialState 的一部分，但不是实例属性（如果只有实例可以改变它们，它就不会很动态）

标签： javascript reactjs

【解决方案1】：

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

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



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

【讨论】：

虽然我赞成它是正确的解决方案，但真的应该将组件保留为实例属性吗？我认为这确实否定了动态部分，因为组件现在应该在构建时呈现哪些组件（至少从示例中）。可能 props 或 state 更适合此类模板出现在
@Icepickle，我同意，为了避免这种情况，可以更好地进行结构化

【解决方案2】：

这行有问题：

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

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

return <Component key={i} />

【讨论】：