javascript - 多次调用同一实例组件ReactJS

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

我以这种方式使用它：

 render(){

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

有什么方法可以获取ContentComponent的引用并将相同的引用传递给3个道具？

我已经尝试过在常量中引用，但不起作用。

最佳答案

您可以创建一个返回ContentComponent的函数

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

如果ContentComponent是一个函数，那就更简单了：

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

您还可以让ModSe设置getSection：

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

关于javascript - 多次调用同一实例组件ReactJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57677468/