react中子传父信息

思路是:

在父组件定义一个函数接受参数,接收的参数用于接收子组件的信息,把函数传给子组件,子组件调用父亲传来的函数并把要告诉父亲的话传到函数中,就实现了子传父消息

复制代码
import { useState } from 'react'

import { useRef } from 'react'
// import './App.css'




function Son({onGetSonMsg}) {
const mesgForFa = "子传父亲的消息"
  return(
    <div>这是儿子组件
       <button onClick={()=>onGetSonMsg(mesgForFa)}>告诉父亲</button>
    </div>
  )
}



function App() {
  const [count, setCount] = useState(0)
const inputRef = useRef(null)
const sonMsg = (msg)=>{
    console.log(msg);
    
}


  return (
    <>
      
      <Son onGetSonMsg={sonMsg}>
      </Son>
    </>
  )
}

export default App
相关推荐
闲蛋小超人笑嘻嘻7 分钟前
localStorage用法详解
前端
Swift社区11 分钟前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
Mr_chiu11 分钟前
微前端从入门到精通:Vue开发者的大型应用架构演进指南
前端·架构
Violet_YSWY15 分钟前
Vue-Pinia defineStore 语法结构
前端·javascript·vue.js
全栈陈序员15 分钟前
v-if 和 v-for 的优先级是什么?
前端·javascript·vue.js·学习·前端框架·ecmascript
xinyu_Jina17 分钟前
Info Flow:大规模列表渲染中的UI虚拟化、数据懒-加载与前端性能工程
前端·ui
GISer_Jing19 分钟前
JD AI全景:未来三年带动形成万亿规模的人工智能生态
前端·人工智能·aigc
全栈陈序员21 分钟前
你对 SPA 单页面应用的理解?它的优缺点分别是什么?如何实现 SPA 应用?
前端·vue.js·学习·前端框架·vue
我是伪码农25 分钟前
动态表格案例
前端·javascript·html
我是伪码农26 分钟前
随机点名案例
前端·css·css3