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传递给子组件时，请考虑使用另一种方法，它将使用基于此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();
}

反应切换组件

2 个答案: