从包装组件反应调用 function

Question

I am not that experienced with React, but i've been assigned to an existing complex React project. I have a popup that only showed once but it can load a particular component. I want to close a popup by the button from other components, actually the function to close popup exists in wrapper component, but how to call it from the non-class component?

I have a popup called ModalView.jsx , it's a wrapper:

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>
    );
  }
}

and i have a component that be showed in {showedComponent} called 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>
  ...
);
};

So how to call onCancel() function from ModalView.jsx to MyCard const component?

Answer 1

You can use render prop pattern here:

// 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>
);

Now ChildComponent has close props containing onClose handler.

PS: By the way, it's better to avoid creating callbacks on each render, you can declare your onClose handler on class level instead of render() function:

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

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