父传子
实现步骤
- 父组件传递数据 - 在子组件标签上绑定属性
- 子组件接收数据 - 子组件通过props参数接收数据
// 父传子
// 1. 父组件传递数据 子组件标签身上绑定属性
// 2. 子组件接收数据 props的参数
function Son (props) {
// props：对象里面包含了父组件传递过来的所有的数据
// { name:'父组件中的数据'}
console.log(props)
return (
<div>
<h2>子组件接收的数据父组件:</h2>
<div>我也姓:{props.xingshi}</div>
</div>
)
}
function App () {
const xingshi = 'zhang'
return (
<div>
<h1>父组件的数据:</h1>
<div>我姓:{xingshi}</div>
<Son xingshi={xingshi}/>
</div>
)
}
export default App
image.png
props说明
props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX
function Son (props) {
console.log(props)
return <div>this is son, {props.name}, jsx: {props.child}</div>
}
function App () {
const name = 'this is app name'
return (
<div>
<Son
name={name}
age={18}
isTrue={false}
list={['vue', 'react']}
obj={{ name: 'jack' }}
cb={() => console.log(123)}
child={<span>this is span</span>}
/>
</div>
)
}
export default App
image.png
props是只读对象
子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改
特殊的prop-chilren
场景：当我们把内容嵌套在组件的标签内部时，组件会自动在名为children的prop属性中接收该内容
image.png
审查元素查看
image.png
子传父
image.png
核心思路：在子组件中调用父组件中的函数并传递参数
import { useState } from "react"
function Son ({ onGetSonMsg }) {
// Son组件中的数据
const sonMsg = '来自子组件的数据'
return (
<div>
这是子组件
<button onClick={() => onGetSonMsg(sonMsg)}>获取子组件的数据</button>
</div>
)
}
function App () {
const [msg, setMsg] = useState('')
const getMsg = (msg) => {
console.log(msg)
setMsg(msg)
}
return (
<div>
父组件: {msg}
<Son onGetSonMsg={getMsg} />
</div>
)
}
export default App
兄弟组件通信
image.png
实现思路: 借助
状态提升 机制，通过共同的父组件进行兄弟之间的数据传递
- A组件先通过子传父的方式把数据传递给父组件App
- App拿到数据之后通过父传子的方式再传递给B组件
// 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) => {
console.log(name)
setName(name)
}
return (
<div>
this is App
<A onGetAName={getAName} />
<B name={name} />
</div>
)
}
export default App
image.png
跨层组件通信
09.png
实现步骤：
- 使用
createContext方法创建一个上下文对象Ctx - 在顶层组件（App）中通过
Ctx.Provider组件提供数据 - 在底层组件（B）中通过
useContext钩子函数获取消费数据
// App -> A -> B
import { createContext, useContext } from "react"
// 1. createContext方法创建一个上下文对象
const MsgContext = createContext()
// 2. 在顶层组件 通过Provider组件提供数据
// 3. 在底层组件 通过useContext钩子函数使用数据
function A () {
return (
<div>
这个是组件A
<B />
</div>
)
}
function B () {
const msg = useContext(MsgContext)
return (
<div>
<div>这个是组件B:</div>
<div>{msg}</div>
</div>
)
}
function App () {
const msg = '顶级组件传递数据给B组件'
return (
<div>
<MsgContext.Provider value={msg}>
这个是顶级组件 App
<A />
</MsgContext.Provider>
</div>
)
}
export default App
image.png
