react子组件向父组件传参

在React中,子组件向父组件传参(或称为"通信")通常通过事件回调的方式实现。父组件向子组件传递一个函数作为props,子组件在需要时调用这个函数,并可以通过参数的形式向父组件传递数据。

下面是一个简单的例子来说明这个过程:

父组件(ParentComponent)

复制代码
import React, { useState } from 'react';  
import ChildComponent from './ChildComponent';  
  
function ParentComponent() {  
  const [childData, setChildData] = useState('');  
  
  // 这是一个由父组件传递给子组件的函数,用于接收子组件的数据  
  const handleChildData = (data) => {  
    setChildData(data);  
  };  
  
  return (  
    <div>  
      <h1>Parent Component</h1>  
      <p>Data from Child: {childData}</p>  
      <ChildComponent onReceiveData={handleChildData} />  
    </div>  
  );  
}  
  
export default ParentComponent;

子组件(ChildComponent)

复制代码
import React from 'react';  
  
function ChildComponent({ onReceiveData }) {  
  // 假设这里有一个按钮,点击时会触发数据传递  
  const sendDataToParent = () => {  
    const dataToSend = 'Hello from Child!';  
    onReceiveData(dataToSend); // 调用父组件传递的函数,并传递数据  
  };  
  
  return (  
    <div>  
      <h2>Child Component</h2>  
      <button onClick={sendDataToParent}>Send Data to Parent</button>  
    </div>  
  );  
}  
  
export default ChildComponent;

在这个例子中,ParentComponent 通过props向ChildComponent传递了一个名为onReceiveData的函数。这个函数在ParentComponent中被定义,用于更新ParentComponent的state(即childData)。当ChildComponent中的按钮被点击时,它会调用onReceiveData函数,并传递一个字符串'Hello from Child!'作为参数。这样,ParentComponent就能够接收到来自ChildComponent的数据,并更新其状态,从而在UI上反映出这一变化。

这种方式是React中实现组件间通信的一种常用且有效的方式,特别适用于父子组件之间的数据传递。

相关推荐
小浣熊喜欢揍臭臭23 分钟前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@39 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响1 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121431 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin112 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php