형제 구성 요소 표시 reactJs

Question

반응 형 세계에서 새로운데 형제 구성 요소의 구성 요소를 표시합니다. 내 토스트 구성 요소에서

import Toast from './components/Toast/Toast' 
class App extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      showToast:false 
     }; 
    } 
    render() { 
    return (
     <div id="cont"> 
      <Toast showToast={this.state.showToast}/> 
      <Header /> 
     </div> 

    ); 
    } 
} 

: 내가 부모 구성 요소가

class Toast extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     const showToast = this.props.showToast; 

     let toast = null; 
     if (showToast) { 
      toast = <div className="visible">Toast Ok</div>; 
     }else{ 
      toast = null; 
     } 

     return (
      <div> 
      {toast} 
      </div> 
     ); 
     } 
} 

export default Toast; 

그리고 내 헤더 구성 요소에서 내가 가진 : 나는 버튼을 클릭하면 그래서 난 상태를 설정합니다

class Header extends Component { 
    render() { 
     return (
     <button> // With click, show toastComponents so setState parent </button> 
     ) 
    } 

을 내 구성 요소를 표시하는 키 showToast.

Answer 1

<Header> 구성 요소로 함수를 전달한 다음 버튼을 클릭하면 해당 함수를 호출 할 수 있습니다.

let showToast =() => this.setState({ showToast: true }); 
// ... 
<Toast showToast={this.state.showToast}/> 
<Header onClick={showToast}> 

그런 다음 당신이해야 할 모든 <Header> 내부의 클릭 핸들러를 통해이 소품을 통과합니다.

<button onClick={this.props.onClick}>