反應js：打開不同組件的相同模態

Question

我想在我的React應用程序的不同組件中打開一個Modal，例如'用戶登錄的模式'。例如：我想從A.js，B.js和C.js打開模式。所以我做了一個新組件ModalWindow.js它包含模態，我將它導入A.js，B.js和C.js。

現在的問題是，我必須保持狀態showModal: false在所有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 

Answer 1

我強烈建議丹·阿布拉莫夫在How can I display a modal dialog in Redux that performs asynchronous actions?描述的方法。基本上，有一箇中央組件負責顯示模態，並派發一些動作，讓模態名稱打開，並將任何值作爲道具傳遞。

Answer 2

你可以有模內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