React基础之组件通信
组件嵌套
父子传值实现
实现步骤
1.父组件传递数据-在子组件标签上绑定属性
2.子组件接收数据-子组件通过props参数接收数据
import React, { useRef, useState } from 'react';
//父传子
//1.父组件传递数据，需要在子组件标签上绑定数据
//2.子组件接收数据 props的参数
function Son(props){
//props对象中包含了父组件中传递的所有数据
console.log(props);
return <div>this is Son {props.name},jsx:{props.child}</div>
}
function App() {
const name='this is app'
return (
<div>
<Son
name={name}
age={18}
isTrue={false}
list={['vue','React']}
obj={{name:'jack'}}
cb={()=>{console.log('111');}}
child={<span>this is span</span>}
></Son>
</div>
);
}
export default App;
props的说明
props中可以传递任何数据
props是只读对象
子组件只能读取props中的数据，而不能直接修改父组件的数据
特殊的prop children
当我们把内容签到到子组件标签中，父组件回自动在名为children的props属性中接收该内容
import React, { useRef, useState } from 'react';
function Son(props){
return <div>this is son ,{props.children}</div>
}
function App() {
const name='this is app'
return (
<div>
<Son>
<span>this is span</span>
</Son>
</div>
);
}
export default App;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
子传父
在子组件中调用父组件中的函数并传递参数
import React, { useRef, useState } from 'react';
function Son({onGetSonMsg}){
const sonMsg='this is son msg'
return(
<div>
this is son<button onClick={()=>onGetSonMsg(sonMsg)}>{sonMsg}</button>
</div>
)
}
function App() {
const [msg,setMsg]= useState('')
const getmsg=(msg)=>{
console.log(msg);
setMsg(msg)
}
const name='this is app'
return (
<div>
this is app,{msg}
<Son
onGetSonMsg={getmsg}
>
</Son>
</div>
);
}
export default App;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
兄弟组件之间的数据传递
使用状态提升实现兄弟组件通信，A通过子传父将数据传入到父组件，然后在由父组件的父传子给子组件
import React, { useRef, useState } from 'react';
function A({onGetAName}){
const name='this is A name'
return(
<div>
this is A
<button onClick={()=>onGetAName(name)}>send</button>
</div>
)
}
function B({name}){
return(
<div>this is B,
{name}
</div>
)
}
function App() {
const [name,setName]=useState('')
const getAname=(name)=>{
console.log(name);
setName(name)
}
return (
<div>
this is App
<A onGetAName={getAname}/>
<B name={name}/>
</div>
);
}
export default App;
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
使用context机制跨层组件通信
1.使用createContext方法创建上下文对象Ctx
2.在顶层组件App中通过Ctx.Provider组件提供数据
3.在底层组件B中使用useContext钩子函数获取消费数据
import React, { createContext, useContext, useRef, useState } from 'react';
const MsgContext=createContext()
function A(){
return(
<div>
this is App
<B/>
</div>
)
}
function B(){
const msg=useContext(MsgContext)
return(
<div>
this is B,{msg}
</div>
)
}
function App() {
const msg='this is app msg'
return (
<div>
<MsgContext.Provider value={msg}>
this is App
<A/>
</MsgContext.Provider>
</div>
);
}
export default App;
