多次调用同一个实例组件 ReactJS

Question

I have next modal component in React:

class Modal extends Component {
 render(){
   return(     
    <div className="modal-content">
      <div className="modal-header">
        { this.props.modalHeader }
      </div>
      <div className="modal-body" className={this.props.className}>
        { this.props.modalBody }
      </div>
      <div className="modal-footer">
        { this.props.modalFooter }
      </div>
    </div>);
  }
}

And I'm using it this way:

 render(){

  return(
        <Modal 
           modalHeader={<ContentComponent getSection='header'/>}
           modalBody={<ContentComponent getSection='body'/>}
           modalFooter={<ContentComponent getSection='footer'/>}
        />
  );
 }

There is any way to get a reference of ContentComponent and pass this same reference into the 3 props?

I have tried reference in a constant but doesn't work.

Answer 1

You could create a function that returns a ContentComponent

const ccWrapper = (section)=>(<ContentComponent getSection={section}/>)
//later in code
modalHeader={ccWrapper('header')}

If ContentComponent is a function it's even easier:

modalHeader={ContentComponent({getSection:'header'})}

You could also let getSection be set by Modal:

<Modal cc={ContentComponent} />
//in modal
const {cc:ContentComponent} = props;
//...
<div className="modal-header">
  <ContentComponent getSection="header" />