React 父子组件通信

1. 父传子

通过props传递

// 父组件
export default function App() {
  return <Child value="111"></Child>
}
// 子组件
function Child(props) {
  return <div>我是父组件传递的value:{props.value}</div>
}

2. 子传父

通过父组件传递函数让子组件调用

import {useState} from 'react'
// 父组件
export default function App() {
  const [value,setValue] = useState(0)
  const fn = (value) => {
    setValue(value)
  }
  return (
    <>
    <div>我是子组件传递的Value:{value}</div>
    <Child fn={fn}></Child>
    </>
  )
}

// 子组件
function Child(props) {
  const fn1 = () => {
    props.fn(123)
  }
  return (
    <button onClick={fn1}>子传父</button>
  )
}