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

Question

我在 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 个 Prop ？

我试过常量引用，但没有用。

Answer 1

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

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

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

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

你也可以让 getSection 由 Modal 设置:

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