React 从包装器组件调用函数

Posted 2023-02-23

【中文标题】React 从包装器组件调用函数

【英文标题】：React call a function from wrapper component

【发布时间】：2020-01-27 13:40:57

【问题描述】：

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

我有一个名为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   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>
  ...
);
;

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

【参考方案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 具有包含onClose 处理程序的close 道具。

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

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

  render() 
    // use this.onClose instead