React子组件向父组件传递信息

重要思想： 回调函数 在父组件中让子组件留下一个属性（让孩子留下一个电话号码，里面有孩子想要爸爸帮他做的事情，孩子若想爸爸帮他做事就调用他留在父组件中的属性）

控制键:孩子(set)
被控件：爸爸(原始状态）

"use client"
import Image from 'next/image'
import { Component } from 'react';

//子组件
export class Sidebar extends Component{
  render(){
    return (
      <div style={{ background: "yellow" }}>
        <ul>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
        </ul>
      </div>
    );
  }
}

//子组件
export class Navbar extends Component{
  render(){
    return(
      <div style={{background:"red"}}>
        <button onClick={() =>
          // console.log("子通知父组件")
          this.props.setIsShow()
        }>click</button>
        <span>navbar</span>
      </div>
    )
  }
}

//父组件
export default class App extends Component{
  state = {
    isShow:false
  }

  render(){
    return (
      <div>
        {/* <button onClick={() =>{
          this.setState({
            isShow: !this.state.isShow
          })
        }}>click</button> */}
        {/* 给孩子传一个属性，自己不会执行，只有调用的时候才会执行 */}
        {/* 孩子给爸爸留了一个电话号码，告诉爸爸需要帮他做的事情 */}
        <Navbar
          setIsShow={() => {
            // console.log("父组件中的event事件")
            this.setState({
              isShow:!this.state.isShow
            })
          }}
        />
        //**这里是通过按钮控制sidebar是否显示**
        {this.state.isShow && <Sidebar />}
      </div>
    );
  }
  
}