React js：異なるコンポーネントから同じモーダルを開く

Question

私のReactアプリケーションのさまざまなコンポーネントから「ユーザーログインのモーダル」と言うモーダルを開きたいとします。例：私は、モーダルをA.js、B.jsおよびC.jsから開きたいです。そこで私はModalWindow.jsという新しいコンポーネントを作成しました。これにはA.js、B.js、C.jsにインポートされました。

問題は、Modalが表示/非表示にするすべての3つのコンポーネントで状態showModal: falseを維持する必要があることです。とにかく、私は単一の状態を維持しなければならないのですか？

1つの方法は、親コンポーネントに状態を維持することです。しかし、可能な方法はありますか？

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