react兄弟传参 子传父 父传子

react中兄弟组件传参数，和vue思想是一致的，首先是子传给父，再由父传给另一个孩子

首先是子传父

1.在儿子组件定义好想要传给父组件的消息

2.在父组件定义好一个函数传给儿子 传给儿子

3.在子组件接收父组件传过来的函数，先解构再绑定到触发父组件传过来的这个函数上 

import { useState } from "react"


function BroSmall (){
    return (
        <>
            <div>小儿子</div>
            
        </>
    )
}

// 3.在子组件接收父组件传过来的函数，先解构再绑定到触发父组件传过来的这个函数上
function BroBig ({onMsgMethod}){
    // 1.在儿子组件定义好想要传给父组件的消息
    const toSmallMsg = "大儿子告诉小儿子的话"
    return (
        <>
            <div>大儿子</div>
            <button onClick={()=>onMsgMethod(toSmallMsg)}>传给兄弟</button>
        </>
    )
}


function App(){
    // 2.在父组件定义好一个函数传给儿子
    const MsgMethod =(msg)=>{
        console.log(msg);
        
    }

    return(
       <>
        <div>兄弟传参</div>
        <BroBig onMsgMethod={MsgMethod}></BroBig>
        <BroSmall></BroSmall>
       </>

    )
}


export default App

然后父传子

4.定义一个useState（）状态变量

5.然后绑定在父组件的子组件的调用上面

6.在子组件调用传回的数据

import { useState } from "react"

// 6.在子组件调用传回的数据
function BroSmall ({message}){
    return (
        <>
            <div>小儿子</div>
            <div>{message}</div>
        </>
    )
}

// 3.在子组件接收父组件传过来的函数，先解构再绑定到触发父组件传过来的这个函数上
function BroBig ({onMsgMethod}){
    // 1.在儿子组件定义好想要传给父组件的消息
    const toSmallMsg = "大儿子告诉小儿子的话"
    return (
        <>
            <div>大儿子</div>
            <button onClick={()=>onMsgMethod(toSmallMsg)}>传给兄弟</button>
        </>
    )
}


function App(){
    // 4.定义一个useState（）状态变量
    const [ms,setMs] = useState("")

    // 2.在父组件定义好一个函数传给儿子
    const MsgMethod =(msg)=>{
        console.log(msg);
        setMs(msg)
    }

    return(
       <>
        <div>兄弟传参</div>
        <BroBig onMsgMethod={MsgMethod}></BroBig>
        {/* 5.然后绑定在父组件的子组件的调用上面 */}
        <BroSmall message={ms}></BroSmall>
       </>

    )
}


export default App