组件通讯

父子组件传值

父组件 A.js

    import { useState } from 'react';
    import B from './B';
    const A = () => {
        const [msg, setMsg] = useState('A组件');
        const delClick = (val) => {
            // 父组件拿子组件的值，并更新
            setMsg(val);
        }
        return (
            <div className='b'>
                <h1>A组件</h1>
                <h2>{msg}</h2>
                {/* msg：给子组件传值，onDelClick: 子组件给父组件传值 */}
                <B msg={msg} onDelClick={() => delClick(val)} />
            </div>
        )
    }
    export default A;

子组件 B.js

    // 解构父组件传过来的值
    const B = ({ msg, onDelClick }) => {
        const bClick = () => {
            // 子组件给父组件传值
            onDelClick('B组件');
        }
        return (
            <div className='b'>
                <h1>{msg}</h1>
                <button onClick={() => bClick()}>del</button>
            </div>
        )
    }
    export default B;

爷孙组件传值（祖孙、兄弟组件传值）

定义一个公共的context方法 MyContext.js

    import { createContext } from 'react';
    export const MyContext = createContext();

爷组件 A.js

    import { useState } from 'react';
    // 导入公共方法
    import { MyContext } from './MyContext'
    import C from './C';
    const A = () => {
        const [msg, setMsg] = useState('A组件');
        const delClick = (val) => {
            // 父组件拿子组件的值，并更新
            setMsg(val);
        }
        return (
            <MyContext.Provider value={{msg, del: delClick}}>
                <div className='b'>
                    <h1>A组件</h1>
                    <h2>{msg}</h2>
                    <C/>
                </div>
            </MyContext.Provider>
        )
    }
    export default A;

孙组件C.js

    import { useContext } from "react"
    // 导入公共方法
    import {MyContext} from './MyContext'
    const C = () => {
        const value = useContext(MyContext);
        return (
            <div>
                孙组件： {value}
                <button onClick={() => value.del('C组件')}>del</button>
            </div>
        )
    }

    export default C

兄弟组件也可以通过祖孙组件通讯方式传值