반응식 토글 구성 요소

Question

다음과 같은 간단한 코드가 있습니다. Toggle Button을 누르면 구성 요소 하위가 숨기거나 표시되지만 그렇지 않습니다.

무언가를 다시 렌더링해야합니까? 와 그

class Parent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      active: true, 
     }; 

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

    handleClick() { 
     this.setState({ 
      active: !this.state.active 
     }); 
    } 

    render() { 
     return (
      <div> 
       <OtherComponent /> 

       {this.state.active && <Child />} 

       <button type="button" onClick={this.handleClick}> 
        Toggle 
       </button> 

      </div> 
     ) 
    } 
} 

주 : 난 그냥 당신이 얻을 또는 주를 통해 그것을 설정해야

import React, {Component} from 'react'; 

let active = true 

const handleClick =() => { 
    active = !active 
} 

class Parent extends React.Component { 
    render() {  
     return ( 
      <div> 
       <OtherComponent /> 

       {active && <Child />} 

       <button type="button" onClick={handleClick}> 
        Toggle 
       </button> 

      </div>    
     )   
    } 
} 

class Child extends React.Component { 
    render() { 

     return ( 
      <div>   
       I am the child 
      </div>    
     )    
    } 
} 

class OtherComponent extends React.Component { 
    render() {  
     return ( 
      <div>   
       I am the OtherComponent 
      </div>    
     )   
    } 
} 

Answer 1

클릭 버튼을 통해 전환/CSS 클래스를 아웃으로 전환하지 않으 이 접근법을 사용하면 전체 부모 구성 요소 (자식 요소는 물론)를 렌더링 할 수 있습니다.
prop을 자식 구성 요소에 전달할 때 다른 방법을 사용하는 것이 좋습니다.이 구성 요소는이 보조를 기반으로하는 콘텐츠로 자체 렌더링합니다 (빈 div 또는 무엇인가 렌더링 할 수 있음).
애니메이션과 물건이 포함 된 react-collapse과 같이 쉽게 작업을 수행 할 수있는 라이브러리가 많이 있습니다.

Answer 2

앱 상태를 관리하려면 state 및 props 만 사용해야합니다. 당신이 강제로 수 사용 forceUpdate()를 다시 렌더링

class Parent extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     active: true 
    }; 
    this.handleClick = this.handleClick.bind(this); 
    } 

    const handleClick =() => { 
    this.setState({active = !this.state.active}); 
    } 

    render() {  
    return ( 
     <div> 
     <OtherComponent /> 
     {this.state.active && <Child />} 
     <button type="button" onClick={handleClick}> 
      Toggle 
     </button> 
     </div>    
    );   
    } 
} 

---

Alernatively을, 그러나 이것은 권장하지 입니다 :

그래서 대신하려고 내가 얻을

const handleClick =() => { 
    active = !active; 
    this.forceUpdate(); 
}