javascript - 通过在 child 中调用函数的 react 孙子

Question

假设我有一个像这样的模板模态 react 组件(经过简化以使我的问题更清晰):

function Modal(props) {
    const hide=()=>{
        document.querySelector('#modal').style.display='none';
    };

    return (
        <div id = 'modal' className='modal'>
           {props.children}
           //close button and so on...
        </div>
    );
}

export default Modal;

现在我正在为特定目的制作更具体的模式版本。因此，我传递了 Modal 功能组件 children，它将成为 AreYouSureModal 的孙子:

function AreYouSureModal(props) {

    yesAction = ()=>{props.yesAction}
    noAction = ()=>{props.noAction}
    const children = <fragment>
        Are you sure?
        <button onclick = {this.yesAction /*and call .hide() in Modal*/}>Yes</button>
        <button onclick = {this.noAction /*and call .hide() in Modal*/}>No</button>    
    </fragment>;

    return <Modal children = {children} />
}

export default AreYouSureModal;

现在 yesAction 和 noAction 将是我从 AreYouSureModal 的父级获得的东西，所以我传递这些函数。但这些按钮还需要调用模板 Modal 功能组件中的 hide() 函数。做这个的最好方式是什么？

我是否要让 AreYouSureModal 中的 yesAction 函数调用 Modal 子项的方法？或者我是否将 Modal 设为 AreYouSureModal 函数中的常量，并在传递之前将这些方法绑定(bind)到该常量？

换句话说，如何创建调用子函数的孙子函数？或者我是否试图以完全错误的方式做到这一点？

Answer 1

我建议不要使用样式隐藏模式，而是使用 React Portals 来创建模式。 。免责声明:我还没有开始使用钩子(Hook)，所以我将使用类组件来编写它。

无论如何，你的Modal组件将看起来像这样:

class Modal extends React.Component {
  render() {
    if (!this.props.isOpen) return null

    return (
      ReactDOM.createPortal(
        <div className="modal">
          {this.props.children}
        </div>
      )
    )
  }
}

那么您的 AreYouSureModal 组件将如下所示:

class AreYouSureModal extends React.Component {
  handleYesAction = () => {
    /* Do something */
    this.props.onClose()
  }

  handleNoAction = () => {
    /* Do something */
    this.props.onClose()
  }

  render() {
    return (
      <Modal isOpen={this.props.isOpen}>
        <React.Fragment>
          <h2>Are you sure?</h2>
          <button onClick={this.handleYesAction}>Yes</button>
          <button onClick={this.handleNoAction}>No</button>    
         </React.Fragment>
      </Modal>
    )
  }
}

最后，您渲染 AreYouSureModal 的组件将保存模式的状态:

class App extends React.Component {
  state = { isAreYouSureModalOpen: false }

  openAreYouSureModal = () => this.setState({ isAreYouSureModalOpen: true })

  closeAreYouSureModal = () => this.setState({ isAreYouSureModalOpen: false })

  render() {
    return (
      <React.Fragment>
        <button onClick={this.openAreYouSureModal}>Open modal</button>

        <AreYouSureModal
          onClose={this.closeAreYouSureModal}
          isOpen={this.state.isAreYouSureModalOpen}
        />
      </React.Fragment>
    )
  }
}