react切换组件

IT技术 javascript reactjs
2021-05-11 06:16:03

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

您需要通过 state 获取或设置它： 

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

请注意，使用这种方法，您将重新：渲染整个父组件（以及它的子组件）。
考虑使用另一种方法，当您将 a 传递prop给子组件时，它将使用基于此props的内容呈现自己（它可以呈现空的div或其他内容）。
有许多库可以让您轻松完成这项工作，例如带有动画和内容的react-collapse。

您应该只使用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();
}
其它你可能感兴趣的问题
上一篇多个 API 调用时只运行一次响应拦截器 下一篇铝制立方体 - 风扇和热端支架 - 值得吗？