「React」组件通信 —— 子传父

86 阅读1分钟

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

代码

直接看代码吧,没什么可以说的 就是子组件调用父组件传递过来的函数,并且把数据当成函数的参数

import React, { useState } from 'react'

const Son = ({ getSonMsg }) => {
  const msg = 'this is sonMsg'

  const clickHandler = () => getSonMsg(msg)

  return (
    <>
      {msg}
      <button onClick={clickHandler}>getSonMsg</button>
    </>
  )
}

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

  return (
    <>
      <Son getSonMsg={getSonMsg} />
      <h1>{msg}</h1>
    </>
  )
}

image.png