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