Question

说我有一个这样的模板模态反应组件（简化了我的问题，使其变得更加清晰）：

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将从我从hide()的父那里获得，所以我要传递这些函数。但是这些按钮还需要调用模板Modal功能组件中的yesAction函数。做这个的最好方式是什么？

我是否在AreYouSureModal子级的方法中调用Modal的{{1}}函数？还是在Modal函数中使AreYouSureModal成为常量，然后将这些方法绑定到常量上？

换句话说，我该如何创建在子代中调用函数的孙子代？还是我完全以完全错误的方式尝试执行此操作？

Answer 1

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

无论如何，您的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>
    )
  }
}

传递调用子级函数的子孙

1 个答案: