React
父传子
实现：
javascript">function Son(props){return <div>{ props.name }</div>
}
function App(){const name = 'this is app name'return (<div><Son name={name}/></div>)
}注意：这里可以传递任何类型，包括函数，span盒子等等
特殊：当我们将内容嵌套在子盒子内部时，在子组件里面可以通过props.childern既可以调用数据
如使用时：
javascript"><Son name={name}><span>hdfus</span>
</Son>子传父
子组件调用父组件里面的函数
javascript">function Son({ onGetMsg }){const sonMsg = 'this is son msg'return (<div>{/* 在子组件中执行父组件传递过来的函数 */}<button onClick={()=>onGetMsg(sonMsg)}>send</button></div>)
}
或者：
const Son=({ onGetMsg })=>{const sonMsg = 'this is son msg'return (<div>{/* 在子组件中执行父组件传递过来的函数 */}<button onClick={()=>onGetMsg(sonMsg)}>send</button></div>)}
function App(){const getMsg = (msg)=>console.log(msg)return (<div>{/* 传递父组件中的函数到子组件 */}<Son onGetMsg={ getMsg }/></div>)
}兄弟间通信(状态通信)
a传父组件，父组件传b
javascript">// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B
import { useState } from "react"
function A ({ onGetAName }) {// Son组件中的数据const name = 'this is A name'return (<div>this is A compnent,<button onClick={() => onGetAName(name)}>send</button></div>)
}
function B ({ name }) {return (<div>this is B compnent,{name}</div>)
}
function App () {const [name, setName] = useState('')const getAName = (name) => {setName(name)}return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>)
}
export default App跨层通信
实现步骤：
-
使用
createContext方法创建一个上下文对象Ctx -
在顶层组件（App）中通过
Ctx.Provider组件提供数据 -
在底层组件（B）中通过
useContext钩子函数获取消费数据
javascript">// App -> A -> B
import { createContext, useContext } from "react"
// 1. createContext方法创建一个上下文对象
const MsgContext = createContext()
function A () {return (<div>this is A component<B /></div>)
}
function B () {// 3. 在底层组件 通过useContext钩子函数使用数据const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}
function App () {const msg = 'this is app msg'return (<div>{/* 2. 在顶层组件 通过Provider组件提供数据 */}<MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}
export default App
