从包装器组件响应调用函数

Question

我对React并没有经验，但是我已经被分配到一个现有的复杂React项目中。我有一个仅显示一次但可以加载特定组件的弹出窗口。我想通过按钮从其他组件关闭弹出窗口，实际上关闭弹出窗口的功能存在于包装器组件中，但是如何从非类组件中调用它呢？

我有一个名为ModalView.jsx的弹出窗口，它是一个包装器：

class ModalView extends Component {
  static propTypes = {
    //...
    isShow: PropTypes.bool,
  };
  static defaultProps = {
    isShow: false,
  }
  render() {
    const {
      isShow,
      showedComponent,
    } = this.props;

    onCancel = () => {
      const { showPagePopup } = this.props;
      showPagePopup({ isShow: false });
    }
    return (
      <div
        className={cx('page-popup modal fade', {
          'd-block show': isShow,
        })}
        tabIndex="-1"
        role="dialog"
        aria-hidden="true"
      >
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <button type="button" className="close close-modal" data-dismiss="modal" aria-label="Close" onClick={() => this.onCancel()}>
              <IconCloseModal width="14" height="14" className="icon icon-close" />
            </button>
            <div className="modal-body">
              {showedComponent}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

而且我在{showedComponent}中显示的组件称为MyCard.jsx：

const MyCard = ({
myRules = isShow
}) => {
    const openPage = () => {
      // -------how to call onCancel() function from ModalView.jsx in this line?--------
      var pageUrl = `xxx`;
      setTimeout(function(){
        window.open(pageUrl, '_blank');
      }, 3000);
    }
return (
  ...
  <PrimaryButton onClick={() => openPage()} className="hide-for-print-version ml-3">
     Open Page
  </PrimaryButton>
  ...
);
};

那么如何从onCancel()到ModalView.jsx const组件调用MyCard函数？

Answer 1

您可以在此处使用渲染道具模式：

// modal
  ...
  render() {
    return (
      <div className="modal-body">
        {showedComponent(onClose)}
      </div>
    );
  }
  ...

// using modal
// instead of
return (
  <Modal>
    <ChildComponent />
  </Modal>
);

// use

return (
  <Modal>
    {close => <ChildComponent close={ close } />
  </Modal>
);

现在ChildComponent具有包含close处理程序的onClose道具。