Question

我想从我的React应用程序中的不同组件打开一个Modal，用于用户登录＆＃39;模式。例如：我希望模式从B.js，C.js和ModalWindow.js打开。所以我创建了一个包含模态的新组件A.js，我将其导入B.js，C.js和showModal: false。

现在的问题是我必须在Modal的所有3个组件中维护状态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

$this->Restaurant->Kitchen->Behaviors->attach('containable'); // Enable Containable for Kitchen Model

$this->Restaurant->Kitchen->find('first', array(
    'recursive' => -1 // don't collect other data associated to Kitchen for performance purpose
    'conditions' => array('Kitchen.id' => 1),
    'contain' => array('Restaurant.active = 1')
));

Answer 1

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

<强> ModalWindow.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

Answer 2

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

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

2 个答案: