使用动态子组件对组件进行反应

Question

I`m creating a react dynamic dialog where you can add funtionality to the Dialog.

One way of doing this was with Composition, but i did not managed to do this via composition.

I`m not very experienced on React, so this was my frist approach

I got my Modal component, and the modal has

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

I would add components like this

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

In that modal renderer, i have

<ModalContent components={ this.components } />

Then i the final renderer in ModalContent i try to render all attached components

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

}

But the render method does not seems to work, i`ve tryed callin Component.render() instead of the component tag, but still could not make the sub-components render. =(

Would apreciate any help. Thanks

Answer 1

To be even more specific, this resumes on what im attempting

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

}