本篇博客用来记录我的学习成果
防止遗忘

代码

直接看代码吧，没什么可以说的
子传给父，父又传给子
但是实际开发不会这样子啦~

import React, { useState } from 'react'

const SonA = ({ msg }) => {
  return (
    <div style={{ border: '1px solid red' }}> this is A, {msg} </div>
  )
}

const SonB = ({ getBMsg }) => {
  const bMsg = '这是 SonB 的数据'

  return (
    <div style={{ border: '1px solid black' }}>
      this is B<button onClick={() => getBMsg(bMsg)}>发送数据</button>
    </div>
  )
}

export default function App() {
  const [msg, setMsg] = useState(void 0)
  const getBMsg = msg => setMsg(msg)

  return (
    <>
      <SonA msg={msg} />
      <br />
      <SonB getBMsg={getBMsg} />
    </>
  )
}

「React」组件通信 —— 兄弟组件

代码