如何渲染一个模式中的REDX连接组件

Question

我正在尝试将身份验证添加到我的反应REDX应用程序中，并且我想使用模态进行登录和注册页面。我有一个LoginForm和一个SignupForm这是静态组件，我有LoginPage和SignupPage，这是我的表单的容器组件。

我目前能够使用登录和注册路由来呈现容器组件，但我想切换到使用模态。 请问我该如何使用模态，例如react-materialize模态或正常materialize css模态？

感谢您的帮助。

Answer 1

重温这个答案，我会说你需要有两个组件能够沟通。这是简单的React方式来做到这一点。注意有一个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就简单多了，因为状态已经是“全局”了。但这个想法是一样的。而不是让父母控制状态，只需使用你的减速器和动作即可。我希望这有帮助。