使用动态子组件反应组件答案

【问题标题】：React Component with dynamic Sub-Components使用动态子组件反应组件
【发布时间】：2017-12-04 16:51:09
【问题描述】：

我正在创建一个反应动态对话框，您可以在其中向对话框添加功能。

一种方法是使用合成，但我没有设法通过合成来做到这一点。

我对 React 不是很有经验，所以这是我的第一个方法

我得到了我的模态组件，模态有

export default class KneatModal extends React.Component {
constructor() {
  super();
  this.state = {
     open: false
  }
  this.components = [];

我会添加这样的组件

import CommentField from '../../../Modal/ModalContents/CommentField.jsx'

export default class DoApprove extends React.Component {
constructor() {
  super();
}

componentDidMount() {
 this._buildDialog();
}

_buildDialog() {
  console.log("Building the Dialog"); 
  this.modal.components.push(CommentField);
}

在那个模态渲染器中，我有

<ModalContent components={ this.components } />

然后我在ModalContent 中的最终渲染器尝试渲染所有附加组件

 render() {
  var list = this.props.components.map((Component, key) => <Component/> ); 
  return (
     <div className='modal-contents'>
        {list}
     </div>
 )

}

但是渲染方法似乎不起作用，我尝试调用 Component.render() 而不是组件标签，但仍然无法使子组件渲染。 =(

希望有任何帮助。谢谢

【问题讨论】：

你将 CommetField 推入 this.modal.components，然后在模态渲染器中传递 this.components。
它是正确的。 modal 保存着组件列表，所以它会将 this.components 传递给 ModalContents（女巫也在 modal 中），如果不是很清楚，抱歉。
这是各种错误。各种。没有冒犯的意思。发布每个组件的完整代码，以便我们进行更正。
发布了所有 4 个组件的代码。就像他们目前一样（我正在改变以进行测试）

标签： javascript reactjs

【解决方案1】：

更具体地说，这是我正在尝试的内容

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

}

【讨论】：