Question

我正在尝试使用React + Redux创建一个可重用的Modal，但是我无法正确管理该Modal的打开和关闭。

模式需要在父组件上单击链接时打开，并且需要在模式内部单击按钮时关闭。

问题1 我尝试使用React Refs https://reactjs.org/docs/refs-and-the-dom.html，但一切正常，但是根据Refs的文档，这种方法似乎不是正确的方法（或者可能是因为理解不正确）。有人可以对此发表看法吗？

问题2 我一直在尝试使用道具和状态来触发Model的打开和关闭。什么是最好的管理方式？是否通过在父级中添加切换功能并使用它，以便在父级中每次单击都更新并再次渲染子级？在这种情况下如何处理关闭？

Answer 1

您可以在父状态中设置模态属性以控制模态的显示，并将其作为道具的关闭函数传递给道具，当您要切换模态时，该属性会将状态从模态设置为false。

toggleModal() {
  this.setState({
    modal: !this.state.modal
})
}

<Modal show={this.state.modal} close={this.state.toggleModal} />

模式的相关部分：

  onClose(e) {
      this.props.close && this.props.close(e);
  }

  render() {
    if (!this.props.show) {
      return null;
    }
    return (
      <div
        className="custom-modal"
        id="modal"
      >
        <div className="modal-content">
          <div className="modal-close" onClick={this.onClose}>
            X
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }

在React + Redux中管理可重用Modal的打开和关闭

1 个答案: