javascript - 将 props 从组件传递到静态方法

Question

  <Modal onToggleModal={this.onToggleModal}>
    <Modal.Header onToggleModal={this.onToggleModal}>
      <h1>Modal header</h1>
    </Modal.Header>
    <Modal.Body>
      <ProductDescription data={this.props.data} />
    </Modal.Body>
    <Modal.Footer>
      <h1>Modal footer</h1>
      <button type="button" onClick={this.props.onAddToCart}>
        Buy now
      </button>
    </Modal.Footer>
  </Modal>

是否可以将onToggleModal方法Modal直接传递给Modal.Header（这是一个返回组件的静态方法），因为我无法this.props从Modal静态方法内部访问？

模态组件

export default class Modal extends React.Component<IProps> {
  static Header = props => <ModalHeader onToggleModal={props.onToggleModal}>{props.children}</ModalHeader>; }

ModalHeader 组件

const ModalHeader: React.SFC<IProps> = props =>  {
    return (
      <div className="modal-header">
        <button className="trigger" onClick={props.onToggleModal}>
          <i className="fa fa-times close" aria-hidden="true" />
        </button>
        {props.children}
      </div>
    );
}

标签： javascriptreactjs