做电商宠物带哪个网站最好网络营销方法的选择
组件通信
概念：组件通信就是组件之间数据传递，根据组件嵌套关系不同，有不同的通信方法
父传子 —— 基础实现
实现步骤
- 父组件传递数据 - 在子组件标签上绑定属性
- 子组件接收数据 - 子组件通过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}//展示2580const [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>;
}