React切換組件

Question

我在下面有這個簡單的代碼。當我按下切換按鈕時，組件Child應該隱藏/顯示，但事實並非如此。

我需要重新渲染一些東西嗎？ 我不想切換輸入/輸出CSS類，只需通過一個按鈕來切換點擊

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

您需要獲得或通過狀態設置：

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> 
     ) 
    } 
} 

注意與這種方法你會重新：渲染整個父組件（以及它的孩子）。
考慮使用另一種方法，當您將prop傳遞給子組件時，它會使用基於此道具的內容呈現自己（它可以呈現空的div或其他東西）。
有很多這樣的工作可以讓你輕鬆完成這項工作，比如react-collapse帶有動畫和內容。

Answer 2

您應該只使用state和props來管理您的應用狀態。

因此，而不是嘗試：

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，你能使用forceUpdate()強制重新繪製，但這是極力勸阻：

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