React 组件生命周期演示 - 点击按钮显示/隐藏子组件 - 常规

React 组件生命周期演示 - 点击按钮显示/隐藏子组件

本示例演示了如何使用 React 组件的生命周期方法来实现点击按钮显示或隐藏子组件，并同时修改按钮的文字在隐藏子组件和显示子组件之间切换。

代码示例：

import React, { Component } from 'react';
import Son from './Son';

export default class MyLife extends Component {
  state = {
    isShow: true,
  };

  changeShow = () => {
    // 1. 改变state
    this.setState({
      isShow: !this.state.isShow,
    });
  };

  render() {
    return (
      <div>
        <h2>生命周期演示</h2>
        <p>
          <button onClick={this.changeShow}>
            {this.state.isShow ? '隐藏子组件' : '显示子组件'}
          </button>
        </p>
        <hr />
        {this.state.isShow ? <Son /> : ''}
      </div>
    );
  }
}

解释:

状态管理: 我们在MyLife组件中定义了一个状态isShow，用来控制子组件的显示和隐藏。
changeShow方法: 该方法用于改变isShow状态，实现点击按钮后子组件的显示或隐藏。
按钮文字切换: 通过三元运算符根据isShow状态来决定按钮显示的文字，实现按钮文字的动态切换。

总结:

通过以上代码，我们成功实现了点击按钮后显示或隐藏子组件，并同时修改按钮的文字在隐藏子组件和显示子组件之间切换的效果。这展示了 React 组件生命周期方法和状态管理在实现交互功能时的重要作用。

希望这能帮到你！如果你还有其他问题，请随时提问。