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

Question

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

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

问题 1 我尝试使用 React Refs https://reactjs.org/docs/refs-and-the-dom.html 并且一切正常，但是根据 Refs 的文档，该方法似乎不是正确的方法（或者可能是理解错误）。有人可以解释一下吗？

问题 2 我一直在尝试使用 props 和 state 来触发 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>
    );
  }