React组件通信：子组件如何通过点击事件修改父组件状态并触发卸载生命周期

// 父组件 (App.js)
import React from 'react';
import ChildComponent from './ChildComponent';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayChild: true
    };
    this.toggleDisplay = this.toggleDisplay.bind(this); // 绑定this
  }

  toggleDisplay() {
    this.setState(prevState => ({
      displayChild: !prevState.displayChild
    }));
  }

  render() {
    return (
      <div>
        {this.state.displayChild && <ChildComponent onToggle={this.toggleDisplay} />}
        {!this.state.displayChild && <p>Child component is hidden.</p>}
      </div>
    );
  }
}

// 子组件 (ChildComponent.js)
import React from 'react';

class ChildComponent extends React.Component {
  componentDidMount() {
    console.log("ChildComponent mounted!");
  }

  componentWillUnmount() {
    console.log("ChildComponent will unmount!");
    // 在这里执行清理操作，例如清除定时器、取消网络请求等
  }

  render() {
    return (
      <div>
        <h1>This content is shown!</h1>
        <button onClick={this.props.onToggle}>
          Toggle View
        </button>
      </div>
    );
  }
}

export default App;

// 错误的示例片段
class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      show:true
    }
  }
  render() {
    const toggleDisplay=()=>{
      this.setState({show:!this.state.show});
    }
    return (
      <div className="App">
        {this.show && <ChildrenUnmounting onclickfun={toggleDisplay} />} {/* 错误：此处应为this.state.show */}
      </div>
    );
  }
}

// 正确的示例片段
class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      show:true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this); // 建议绑定
  }

  toggleDisplay(){ // 提取为类方法，避免每次渲染都创建新函数
    this.setState(prevState => ({show:!prevState.show}));
  }

  render() {
    return (
      <div className="App">
        {this.state.show && <ChildrenUnmounting onclickfun={this.toggleDisplay} />} {/* 正确：使用this.state.show */}
      </div>
    );
  }
}

class ChildrenUnmounting extends React.Component {
  // 构造函数中无需将props复制到state，直接使用this.props.onclickfun
  // constructor(props) {
  //   super(props);
  // }

  render() {
    return (
      <>
        <h1>This content is shown!</h1>
        <button onClick={this.props.onclickfun}> {/* 直接使用props */}
          Toggle View
        </button>
      </>
    );
  }

  componentWillUnmount() {
    console.log("componentWillUnmount is called!");
    // 在此执行资源清理
  }
}