モーダルでredux接続コンポーネントをレンダリングする方法

Question

私はreact reduxアプリケーションに認証を追加しようとしています。ログインページとサインアップページにモーダルを使用したいと思います。私はLoginFormとSignupFormを持っています。これは静的なコンポーネントです。私はLoginPageとSignupPageを持っています。これらはフォームのコンテナコンポーネントです。

私は現在、ログインとサインアップルートを使用してコンテナコンポーネントをレンダリングできますが、私はモーダルを使用するように切り替える必要があります。 どうすればいいですか？たとえば、react-materializeモーダルまたはノーマルmaterialize cssモーダルを使用してこれを行うにはどうすればよいですか？

ありがとうございます。

Answer 1

この回答に戻って、私はあなたが通信できる2つのコンポーネントを持つ必要があると言います。これはこれを行うための単純なリアクション方法です。 2つの兄弟コンポーネントを持つ1つのAppコンポーネントがあることに注意してください。 propsの値をModalコンポーネントに渡し、propsコールバックを兄弟に渡すことによって、モーダルにレンダリングまたはレンダリングを行わせることができます。

class Modal extends React.Component { 
    render() { 
     return this.props.modalShow ? (
      <div className="modal"> 
       Modal loaded 
      </div> 
     ) : null; 
    }; 
}; 

class Sibling extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.props.openModal(); 
    } 

    render() { 
     return (
      <div> 
       I am a sibling element. 
       <button onClick={this.handleClick}>Show modal</button> 
      </div> 
     ) 
    }; 
} 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      modalShow: false, 
     }; 

     this.openModal = this.openModal.bind(this); 
    }; 

    openModal() { 
     this.setState({ modalShow: true }); 
    } 

    render() { 
     return (
      <div> 
       <Modal modalShow={this.state.modalShow} /> 
       <Sibling openModal={this.openModal}/> 
      </div> 
     ) 
    }; 
}; 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

ここから、状態は「グローバル」なので、Reduxの使用はずっと簡単です。しかし、その考え方は同じです。親に状態を制御させる代わりに、あなたのレデューサーとアクションを使用してください。私はこれが役立つことを願っています