react18组件通信

创建react脚手架

npx create-react-app react-basic

安装配套工具

npm i @reduxjs/toolkit react-redux

 

1. 父传子  props 

当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的props属性中接收该内容

// 父传子
// 1.父组件传递数据  子组件绑定时间
// 2.子组件接收数据  props

const Son = (props) => {
    // props包含了父组件传过来的所有数据
    return <div>son, {props.name}, {props.children}</div>
}

const App = () => {
    const name = 'app name'
    return (
        <div>
            <Son name={name} >
                <span>son里面的span</span>
            </Son>
        </div>
    )
}

2. 子传父

// 子传父

const Son = ({onGetMsg}) => {
    const msg = 'son msg'
    
    return <div>son <button onClick={() => onGetMsg(msg)}>sendMsg</button> </div>
}

const App = () => {
    const getMsg = (msg) => {
        console.log(msg)
    }
    return (
        <div>
            <Son onGetMsg={getMsg} />
        </div>
    )
}

3. 兄弟组件通信，通过子传父，父传子实现

4. 爷孙跨层通信

// 跨层通信

import { createContext } from 'react'
const MsgContext = createContext()

const A = () => {
    return <div>A <B /> </div>
}

const B = () => {
    const msg = useContext(MsgContext)
    
    return <div>B { msg } </div>
}

const App = () => {
    const msg = 'APP'

    return (
        <div>
            <MsgContext.Provider value={msg}>
                app
                <A />
            </ MsgContext.Provider>
        </div>
    )
}