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() {
    const { children: renderProp } = this.props;

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

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

// use

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

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

P.S：顺便说一句，最好避免在每个渲染器上创建回调，您可以在类级别声明onClose处理程序，而不要使用render()函数：

class ModalView extends Component {
  onClose = () => { ... }

  render() {
    // use this.onClose instead
  }
}

React从包装器组件调用函数

1 个答案: