react函数式组件通信

父亲通过props给子传递信息

父组件：
import Son1 from './Son1' //引入子组件
import { useState } from 'react'
function Father(){
	let [text, setText] = useState(0)
	return (
    <>
      <Son1 text={text}></Son1>
    </>
  )
}
export default Father

子组件：
// props={text}
function Son1({text}){
	return (
    <>
      <p>父亲传过来的：{text}</p> //这里使用父亲传过来的text
    </>
  )
}
export default Son1

子组件通过触发回调事件给父亲传递消息：

父组件：
import Son1 from './Son1' //引入子组件
import { useState } from 'react'

function Father(){
	let [text, setText] = useState(0)
	const getHandle = (num) => {
   		 console.log('儿子说给text加上：', num)
   		 setText(text+num)
  	 }
	return (
    <>
      <Son1 text={text} emitHandle={getHandle}></Son1>
    </>
  )
}
export default Father

子组件：
// props={text,emitHandle}
function Son1({text,emitHandle}){
	return (
    <>
      <p>父亲传过来的：{text}</p> //这里使用父亲传过来的text
      <button onClick={() => emitHandle(1)}>点我emit父亲</button>
    </>
  )
}
export default Son1

兄弟之间通信，把父组件当作中间件

父组件：
import Son1 from './Son1' //引入子组件
import Son2 from './Son2' //引入子组件
import { useState } from 'react'

function Father(){
	let [text, setText] = useState(0)
	const getHandle = (num) => {
   		 console.log('兄弟说给text加上：', num)
   		 setText(text+num)
  	 }
	return (
    <>
      <Son1 text={text}></Son1>
      <Son2 add={getHandle}></Son2>
    </>
  )
}
export default Father

子组件1：
// props={text,emitHandle}
function Son1({text,emitHandle}){
	return (
    <>
      <p>父亲传过来的：{text}</p> //这里使用父亲传过来的text 通过兄弟来改变值
    </>
  )
}
export default Son1

子组件2：
// props={text,emitHandle}
function Son2({text,emitHandle}){
	return (
    <>
      <button onClick={() => emitHandle(1)}>给兄弟加1</button>
    </>
  )
}
export default Son2

全局公共变量 createContext / useContext

父组件：content.js
import Son1 from './Son1' //引入子组件
import { useState,createContext } from 'react'

export const CountContext = createContext({}) //创建数据源  关键

function Father(){
	let [title, setTitle] = useState('公共数据')
 	const changeCom = (value) => {
    	setTitle((title = value))
    }
	return (
    <>
     //使用CountContext.Provider包裹子组件 value 是公共使用的数据  可以通过传递函数进行你想要的一些操作
     // CountContext也就是你上面自己取的名字
     <CountContext.Provider value={{ title,change:(value)=>changeCom(value) }}>
      	<Son1></Son1>
      </CountContext.Provider>
      <button onClick={() => changeCom('我是父亲，我修改了公共数据')}></button>
    </>
  )
}
export default Father

子组件：Son1.js
import { useContext } from 'react'
import { CountContext } from './content'  // 关键

// props={text}
function Son1(){
	let data = useContext(CountContext) // 获取公共数据  关键
	return (
    <>
      <p>{data.title}</p> //使用公共数据
       <button onClick={() => data.change('我是儿子，我修改了公共数据')}></button>
    </>
  )
}
export default Son1