反应切换组件答案

【问题标题】：React toggle component反应切换组件
【发布时间】：2017-10-18 07:39:35
【问题描述】：

我在下面有这个简单的代码。当我按下切换按钮时，组件 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>            
        )           
    }
}

【问题讨论】：

Show or hide element in React的可能重复

标签： javascript reactjs

【解决方案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 传递给子组件时，它将使用基于此 prop 的内容呈现自己（它可以呈现空的 div 或其他内容）。
有许多库可以让您轻松完成这项工作，例如带有动画和内容的 react-collapse。

【讨论】：

我在 handleClick = () => { 处收到错误“意外令牌”
这是一个错字。我修好了它。注意我在onClick 和this. 上所做的更改
是的，我在发布后发现了它，感谢它正在工作。我会读你的笔记，干杯

【解决方案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>            
    );          
  }
}

或者，您可以使用forceUpdate() 强制重新渲染，但强烈建议不要这样做：

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

【讨论】：