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个道具？

我尝试用常量引用，但不起作用。

Answer 1

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

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

如果ContentComponent是一个函数，那就更容易了：

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

您还可以通过模式设置getSection：

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

多次调用同一实例组件ReactJS

1 个答案: