React js：从不同的组件打开相同的模式

Question

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

现在的问题是我必须showModal: false在所有 3 个组件中维护状态，以便 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 在如何在 Redux 中显示执行异步操作的模态对话框中描述的方法？. 基本上，有一个中央组件负责显示模态，并分派动作，这些动作给出要打开的模态的名称以及作为道具传递的任何值。

Answer 2

您可以state在模态内部使用并公开两个函数来打开/关闭模态，这将改变状态。可以通过refs其他组件访问这些功能。请参见下面的示例。

模态窗口.js

import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    }
  }
  show() {
    this.setState({
      showModal: true,
    })
  }
  hide() {
    this.setState({
      showModal: true,
    })
  }
  render() {
    return <Modal
    show={this.state.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

A.js、B.js、C.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.refs.modal.show() //to show the modal
    this.refs.modal.hide() //to hide the modal
  }
  render() {
    return <ModalWindow container={this} ref = "modal" / >
  }
}

export default A