React组件通信

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import Husband from './components/Husband'
import Wife from './components/Wife'

// 【组件通信】
const root = ReactDOM.createRoot(document.getElementById('root'))

// props的基本使用
// 本质： 组件标签身上的所有属性，组成一个对象
// 1. 类组件中获取props
// 2. 函数式组件中获取props

// function Header (props) {}

// 🔥 函数式组件，通过形参获取props对象
// 🍀 推荐写法 - 对props进行对象结构，需要什么就使用什么
function Header({ name, intro }) {
  return (
    <>
      <h1>
        Header Component - {name} - {intro}
      </h1>
    </>
  )
}

// 🍅 类组件中：通过this.props获取props对象
class Child extends React.Component {
  render() {
    const { name, intro } = this.props
    return (
      <>
        <div>
          Child Component - {name} - {intro}
        </div>
      </>
    )
  }
}
// 类组件： this.props
// 函数：形式参数
// 结构
// props: 对象，组件标签身上的所有属性组成的对象

class MyApp01 extends React.Component {
  render() {
    return (
      <>
        <div>
          <Header name="大庆★俱乐部" intro="青笺画卿颜^" />
          <Child name="	HeRo丨噬魂丶" intro="倾城沈蜜^" />
        </div>
      </>
    )
  }
}

// props的两大特点 - 任意数据类型
// 1. props可以传递任意数据类型
// 2. props是只读的，单项数据流
function FooterCom({ fn, element }) {
  console.log('element => ', element)
  return (
    <div>
      <h1>Footer 《===》 Footer</h1>
      <button onClick={fn}>Click me !</button>
      {element}
    </div>
  )
}

function HeaderCom({ name, age, isShow, list, child }) {
  console.log('child => ', child)
  return (
    <>
      <div>
        <h1>
          Header - {name} - {age}
          {String(isShow)}
        </h1>
        <h2>
          {list.map((item) => {
            return <i key={nanoid()}>{item}</i>
          })}
        </h2>
        <h3>
          {child.name} ---- {child.age}
        </h3>
      </div>
    </>
  )
}

class MyApp02 extends React.Component {
  render() {
    return (
      <>
        <div>
          <HeaderCom
            // 基本数据类型
            isShow={true}
            un={undefined}
            nu={null}
            name="ChinaUs_破冰"
            age={19}
            // 对象和数组
            list={[1, 2, 3]}
            child={{ name: 'wangzz', age: 24 }}
          />
          <FooterCom
            // 传递函数
            fn={() => {
              console.log('Footer: ◎City,?')
            }}
            // 传递插槽
            element={<i>I miss yt but she doesn't want me, so I back!!!</i>}
          />
        </div>
      </>
    )
  }
}

// 组件通信 - props的两大特点 - 单项数据流
// 1. props可以传递任意数据类型：💥函数 💥JSX
// 2. props是只读的，单项数据流

class MyApp03 extends React.Component {
  render() {
    return (
      <>
        <div>
          <FooterComponent
            fn={() => {
              console.log('we are the world')
            }}
            element={<i>单项数据流</i>}
            name="wangzz - HelloWorld"
            list={[1, 2, 3]}
          ></FooterComponent>
        </div>
      </>
    )
  }
}

function FooterComponent(props) {
  return (
    <>
      <div>
        <h1>Footer - {props.name}</h1>
        {props.list.map((item) => (
          <i key={nanoid()}>{item}</i>
        ))}
        <button
          onClick={() => {
            // 🔥 props是只读的，单项数据流，比vue的单项数据流更加严格
            // 这里无法修改list 因为 list是从父组件传递过来的数据
            props.list.push(4)
          }}
        >
          push + 4
        </button>
        <button onClick={props.fn}>触发父组件传递的函数</button>
      </div>
    </>
  )
}

// 组件通信  ===》 【父传子】
class Parent extends React.Component {
  state = {
    money: 1000,
  }

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    })
  }

  render() {
    return (
      <>
        <div>
          <h1>{this.state.money}</h1>
          <button onClick={this.handleMakeMoney}>你爹开始赚钱了👳🏻‍♂️</button>
          <ChildCom
            // props传数据
            money={this.state.money}
          ></ChildCom>
        </div>
      </>
    )
  }
}

class ChildCom extends React.Component {
  render() {
    return (
      <>
        <div>
          <h1>💴 money: {this.props.money}</h1>
        </div>
      </>
    )
  }
}

// 【组件通信 - 子传父】 - 子组件花掉父组件的钱
// 1. 父组件内 定义一个花钱的函数
// 2. 🔥通过props, 父传子回调函数
// 3. 🔥子组件内容，通过props调用回调函数
// 4. 🔥父组件完成花钱的计算
class ChildMoneyCom extends React.Component {
  render() {
    return (
      <>
        <div>
          <h1>爸爸给我钱了：{this.props.money}</h1>
          <button
            onClick={() => {
              // 💥子组件内，通过props，调用回调函数
              this.props.handleCost(8000)
            }}
          >
            点击我，儿子要花爹的钱了
          </button>
        </div>
      </>
    )
  }
}
class ParentMoneyCom extends React.Component {
  state = {
    money: 1000,
  }

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    })
  }

  // 父组件内部定义一个花钱的函数
  handleCost = (num) => {
    // 父组件完成花钱的计算
    this.setState({
      money: this.state.money - num,
    })
  }

  render() {
    return (
      <>
        <div>
          <h1>{this.state.money}</h1>
          <button onClick={this.handleMakeMoney}>你爹开始赚钱了!👳🏻‍♂️</button>
          <ChildMoneyCom
            // 通过props，父传递子回调函数
            handleCost={this.handleCost}
            money={this.state.money}
          ></ChildMoneyCom>
        </div>
      </>
    )
  }
}

class StateCouncil extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      exchequer: 123101, // 国库里的钱（单位：万亿美元💵）
    }
  }

  // 收税了
  collectTaxes = () => {
    this.setState({
      exchequer: this.state.exchequer + parseInt(Math.random() * 100000),
    })
  }

  // 分配财富 地方请求转移支付
  transferTreasure = (amount) => {
    console.log('amount: ', amount)
    this.setState({
      exchequer: this.state.exchequer - amount,
    })
    console.log(this.state.exchequer)
  }

  render() {
    return (
      <>
        <div>
          <ProvincialGovernment
            exchequer={this.state.exchequer}
            transferTreasure={this.transferTreasure}
            collectTaxes={this.collectTaxes}
          />
        </div>
      </>
    )
  }
}

class ProvincialGovernment extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <>
        <div>
          <span>余额：{this.props.exchequer}</span>
          <button
            onClick={() => {
              this.props.transferTreasure(300)
            }}
          >
            请求支付
          </button>
          <button onClick={this.props.collectTaxes}>交税</button>
        </div>
      </>
    )
  }
}

// 【兄弟组件 - 状态提升】
// 1. 将需要共享的数据，提升到共同的父组件中
// 2. 通过父传子，子传父间接的共享数据
class Family extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      money: 0,
    }
  }

  // 赚钱方法，提升到父组件中
  handleMakeMoney = () => {
    this.setState({
      money: this.state.money + 1000,
    })
  }

  // 父组件定义花钱的函数
  handleCostMoney = () => {
    this.setState({
      money: this.state.money - 5000,
    })
  }

  render() {
    return (
      <>
        <div>
          <h1 style={{ textAlign: 'center' }}>家庭存款：</h1>
          <Husband
            // 父传子money
            money={this.state.money}
            // 传递回调函数
            handleMakeMoney={this.handleMakeMoney}
          />
          <Wife handleCostMoeny={this.handleCostMoney} />
        </div>
      </>
    )
  }
}
const divNode = (
  <div>
    <Family />
  </div>
)
root.render(divNode)