[英]React js: Open same modal from different components
I want to open a Modal, say 'modal for user login', from different components in my React app. 我想从我的React应用程序中的不同组件中打开一个模式,例如“用户登录模式”。 For ex: I want the modal to open from
A.js
, B.js
and C.js
. 例如:我希望从
A.js
, B.js
和C.js
打开模式。 So I made a new component ModalWindow.js
which contains the modal and I imported it in A.js
, B.js
and C.js
. 因此,我制作了一个包含模态的新组件
ModalWindow.js
, ModalWindow.js
其导入到A.js
, B.js
和C.js
。
Now the issue is that I got to maintain state showModal: false
in all 3 components for Modal to show/hide. 现在的问题是,我必须在所有3个组件中保持状态
showModal: false
,以便Modal显示/隐藏。 Is there anyway that I have to maintain a single state. 无论如何,我必须保持一个状态。
One way is that I maintain state in the parent component. 一种方法是我在父组件中维护状态。 But is there any better way possible?
但是还有更好的办法吗?
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
You can have the state
inside the modal and expose two functions to open/close modal which will change the state. 您可以在模态中包含
state
,并公开两个函数来打开/关闭模态,这将改变状态。 Those functions can be accessed via refs
in other components.See the example below. 这些功能可以通过其他组件中的
refs
来访问。请参见下面的示例。
ModalWindow.js 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 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
I highly recommend the approach that Dan Abramov described in How can I display a modal dialog in Redux that performs asynchronous actions? 我强烈建议Dan Abramov在如何在Redux中显示执行异步操作的模式对话框中描述的方法? .
。 Basically, have a central component that is responsible for displaying modals, and dispatch actions that give the name of the modal to open and any values to pass along as props.
基本上,有一个中央组件负责显示模式,并调度动作,以打开要打开的模式名称,并将任何值作为道具传递。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.