组件通信
概念：组件通信就是组件之间数据传递，根据组件嵌套关系不同，有不同的通信方法
父传子 —— 基础实现
实现步骤
- 父组件传递数据 - 在子组件标签上绑定属性
- 子组件接收数据 - 子组件通过props参数接收数据
声明子组件并使用
//声明子组件 首字母大写
const Headerzujian = ()=>{
return <div>子组件</div>
}
//使用子组件
<Headerzujian></Headerzujian>父组件传递数据 - 在子组件标签上绑定属性
<Headerzujian name={'传递的数据'}></Headerzujian> //name是传递的数据子组件接收数据 - 子组件通过props参数接收数据
const Headerzujian = (props)=>{
console.log(props); //props对象里包含了父组件传递过来的所有数据
return <div>子组件 传递的数据={props.name}</div>
}父传子 —— prpos说明
- props可传任意的数据：数字，字符串，布尔值，数组，对象，函数，JSX
- props是只读对象：props只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改
传递多种类型
<Headerzujian name={'传递了数据'} age={12} boolean={false} arr={[1,2,3]} obj={{school:"第一中学"} } fun={()=>{return '11'}} jsx ={<span>span元素</span>} ></Headerzujian>接收到的数据
父传子 —— 特殊的prop children
场景：当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容
使用 把内容嵌套在子组件标签中
<Headerzujian> 1111</Headerzujian>父组件会自动在名为children的prop属性中接收该内
子传父 —— 基础实现
核心思路：在子组件中调用父组件中的函数并传递参数
当子组件需要向父组件传递数据时，父组件可以向子组件传递一个回调函数作为 props。子组件在特定的事件触发时（如按钮点击、表单提交等）调用这个回调函数，并将需要传递的数据作为参数传递给该回调函数。这样父组件就能接收到子组件传来的数据，实现反向的数据流动。
父组件向子组件传递一个回调函数
<Headerzujian onmessage={getmessage}> 1111</Headerzujian>
{zidata}//展示2580
const [zidata,setzidata] = useState('')
const getmessage =(data)=>{
console.log(data); //结果为2580
//要在父组件使用需要使用useState接收
setzidata(data)
}子组件在特定的事件触发时（如按钮点击、表单提交等）调用这个回调函数
//声明组件
const Headerzujian = ({onmessage})=>{
return <div onClick={()=>{onmessage(2580)}}>子组件</div> //调用并传递参数
}兄弟组件通信 使用状态提升实现
实现思路：借组"状态提升"机制，通过父组件进行兄弟组件之间的数据传递
- A组件先通过子传父方式把数据传递给父组件App
- APP在通过父传子方式把数据传递给组件B
声明两个兄弟组件并使用
const Mainzujian = ({onBrother})=>{
return <div >兄弟组件1</div>
}
const Bottomzujian = (props)=>{
return <div>兄弟组件2</div>
}
<Mainzujian></Mainzujian>
<Bottomzujian></Bottomzujian>兄弟组件1先通过子传父方式把数据传递给父组件App
<Mainzujian onBrother={Brothermeg}></Mainzujian>
//接收子组件传递的数据
const [msg,setmsg] = useState('')
const Brothermeg = (data)=>{
console.log(data);
setmsg(data)
}
//向父组件传值
const Mainzujian = ({onBrother})=>{
return <div onClick={()=>{onBrother('兄弟你好')}}>兄弟组件1</div>
}APP在通过父传子方式把数据传递给组件B
<Bottomzujian data={msg}></Bottomzujian> //向子组件传值
//子组件接受并使用
const Bottomzujian = (props)=>{
return <div onClick={()=>{}}>兄弟组件2 兄弟传递的数据 {props.data}</div>
}
使用Context机制跨层级组件通信
实现步骤
- 使用createContext方法创建一个上下文对象Ctx
- 在顶级组件( APP )中通过Ctx.Provider 组件提供数据
- 在底层组件( B )中通过useContext钩子函数获取数据
声明组件并使用组件
const Zizujian = ()=>{
return <div>
子组件
<Sunzujian></Sunzujian>
</div>
}
const Sunzujian = ()=>{
return <div>孙组件</div>;
}
<Zizujian />使用createContext方法创建一个上下文对象Ctx
import { useState ,useRef, createContext,useContext} from "react"; //导入
const MyContext = createContext()在顶级组件( APP )中通过Ctx.Provider 组件提供数据
<MyContext.Provider value={msgfu}> //value值为要传递的数据
<div>
父组件
<Zizujian />
</div>
</MyContext.Provider>在底层组件( B )中通过useContext钩子函数获取数据
const Sunzujian = ()=>{
const msg = useContext(MyContext);
return <div>孙组件接收到的数据: {msg}</div>;
}
