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