reactjs - react js : Open same modal from different components

Question

我想从我的 React 应用程序中的不同组件打开一个模态，例如“用户登录模态”。例如:我希望从 A.js、B.js 和 C.js 打开模式。因此，我创建了一个新组件 ModalWindow.js，其中包含模式，并将其导入到 A.js、B.js 和 中C.js.

现在的问题是我必须在所有 3 个组件中维护状态 showModal: false 以便 Modal 显示/隐藏。无论如何，我必须保持单一状态吗？

一种方法是在父组件中维护状态。但还有更好的办法吗？

X.js

import A from 'A.js'
import B from 'B.js'
import C from 'C.js'

class X extends Component {
  return(
    render{
      <div>
        <A />
        <B />
        <C />
      </div>
    }
  )
}

export default X

A.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default A

B.js

import ModalWindow from 'ModalWindow.js'

class B extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default B

C.js

import ModalWindow from 'ModalWindow.js'

class C extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default C

ModalWindow.js

import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  return(
    render{
      <Modal
      show={this.props.showModal}
      container={this.props.container}
      bsSize='small'
    >
      <Modal.Header closeButton="true">
        <Modal.Title id="contained-modal-title">
          Login
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Login Here
      </Modal.Body>
    </Modal>
    }
  )
}

export default ModalWindow

Answer 1

我强烈推荐 Dan Abramov 在 How can I display a modal dialog in Redux that performs asynchronous actions? 中描述的方法。基本上，有一个中心组件负责显示模态，并调度操作，给出要打开的模态的名称以及作为 props 传递的任何值。