React组件通信

React组件通信

一、父传子

方式1：

​ 通过在子组件标签上设置属性值传递，子组件函数通过props参数接收

如：

//  定义子组件
function Son(props) {
    // 通过标签属性传递，属性以及对应的值都会通过props参数接收
    return <div>父组件传递的属性值：name={props.name}</div>
}
export default function App() {
    return (
        <div className="App">
            <Son name='zs'></Son>
        </div>
    );
}

props参数接收的是一个对象，该对象接收了父组件传来的各种属性值等

方式2：

​ 在子组件闭合标签中传递chidren对象，通过子组件函数的props参数接收，props.chidren进行访问

如：

//  定义子组件
function Son(props) {
    return <div>{props.children}</div>
}
export default function App() {
    return (
        <div className="App">
            <Son> 
        		<div>children传递</div> 
        	</Son>
        </div>
    );
}

这里需要注意的是，如果在子组件闭合标签中只传递1个标签，那么chidren就是这个标签对象；如果传递了多个标签，chidren将是一个数组

二、子传父

父组件将通信函数通过标签属性传递给子组件，子组件通过向通信函数传递参数来进行数据通信

如：

import {useState} from "react";

function Son(props) {
    //  执行父组件传来的通信函数，通过通信函数参数传递传递通信数据
    return <div>
        <button onClick={() => props.onTime(Date.now())}>问问儿子时间</button>
    </div>
}
export default function App() {
    const [curTime, setCurTime] = useState()
    //  定义通信函数
    function getCurTime(cTime) {
        //  从子组件获取到cTime进行自定义操作
        setCurTime(cTime)
    }
    return (
        <div className="App">
            {/* 通过标签属性将函数传递给子组件 */}
            <Son onTime={getCurTime}/>
            {/* 展示儿子传来的时间 */}
            <div>{curTime}</div>
        </div>
    );
}

三、兄弟通信

儿子A和儿子B通信，即A -> 父亲 -> B

如：

function SonA(props) {
    const [msg, setMsg] = useState('A: 我饿了！' + Date.now())
    return  (
        <button onClick={() => {
            setMsg('A: 我饿了！' + Date.now())
            props.acceptMsgFromSonA(msg)
        }}>
            儿子A饿了
        </button>
    )
}

function SonB(props) {
    return <div>
        <div>儿子B</div>
        <div>接收到父亲传来的消息：{props.acceptMsgFromFather()}</div>
    </div>
}

export default function App() {
    const [msg, setMsg] = useState()
    //	用msg接收儿子A传来的数据
    function acceptMsgFromSonA(message) {
        setMsg(message)
    }
    //	获取msg
    function getMsg() {
        return msg
    }
    return (
        <div>
            <SonA acceptMsgFromSonA={acceptMsgFromSonA}></SonA>
            <SonB acceptMsgFromFather={getMsg}></SonB>
        </div>
    )
}

四、顶层向底层传递

即父向子、父向孙、…等传递数据

① 利用createContext()创建上下文Context对象

② 在顶层组件需要传递数据的地方用Context.Provider标签包裹，通过value属性指定需要传递的数据

③ 在底层组件通过useContext(Context)拿到顶层传递的数据

具体使用如下：

//	1.创建上下文对象
const MsgContext = createContext()

export default function App() {
    const [msg, setMsg] = useState('父组件Msg')
    const [modifyCount, setModifyCount] = useState(0)
    return (
        <div>
        	{/*	2.通过Context.Provider的value属性指定向下传递的数据	*/}
            <MsgContext.Provider value={msg}>
                <div>父组件：</div>
                <Son></Son>

            </MsgContext.Provider>
            <button onClick={() => {
                setMsg(`修改父组件Msg ${modifyCount + 1}次`)
                setModifyCount(modifyCount + 1)
            }}>
                修改父组件Msg
            </button>
        </div>
    )
}
function Son(props) {
    return (
        <div>
            <div>儿子组件:</div>
            <GrandSon></GrandSon>
        </div>
    )
}

function GrandSon(props) {
    //	3.使用useContext(Context)获取顶层传递的数据
    const msg = useContext(MsgContext)
    return (
        <div>
            <div>孙子组件：{msg}</div>
        </div>
    )
}