모달에 redux로 연결된 구성 요소를 렌더링하는 방법

Question

react redux 앱에 인증을 추가하려고하는데 로그인 페이지 및 가입 페이지에 모달을 사용하고 싶습니다. 나는 LoginForm과 SignupForm을 정적 구성 요소로 가지고 있으며 폼에 대한 컨테이너 구성 요소 인 LoginPage과 SignupPage을 가지고 있습니다.

현재 로그인 및 가입 경로를 사용하여 컨테이너 구성 요소를 렌더링 할 수 있지만 모달을 사용하도록 전환하고 싶습니다. 모달을 사용하려면 어떻게해야합니까? 예 : react-materialize 모달 또는 일반 materialize css 모달입니까?

도움 주셔서 감사합니다.

Answer 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를 사용하는 것은 상태가 이미 "글로벌"이므로 훨씬 간단합니다. 그러나 아이디어는 같습니다. 부모가 상태를 제어하는 ​​대신, 감속기와 동작 만 사용하십시오. 이게 도움이 되길 바란다.