react.js 前端 前端框架 React 如何实现子传父

在 React 中，子组件向父组件传递数据通常通过回调函数的方式实现。以下是在使用 React 和 TypeScript 中实现子传父的一种常见方式：

在父组件中定义一个用于接收子组件数据的回调函数。通常将该函数作为 props 传递给子组件。

import React, { useState } from "react";

import ChildComponent from "./ChildComponent";

interface ParentProps {

// 父组件回调函数类型定义

onChildData: (data: any) => void;

}

const ParentComponent: React.FC = ({ onChildData }) => {

const handleChildData = (data: any) => {

// 处理子组件传递过来的数据

// ...

};

return (

);

};

export default ParentComponent;

在子组件中，通过调用父组件传递的回调函数将数据传递给父组件。

import React from "react";

interface ChildProps {

onChildData: (data: any) => void;

}

const ChildComponent: React.FC = ({ onChildData }) => {

const handleClick = () => {

const data = "子组件传递的数据";

onChildData(data); // 调用父组件回调函数传递数据

};

return 传递数据给父组件;

};

export default ChildComponent;

在父组件中，定义一个回调函数 handleChildData 来处理子组件传递过来的数据，并将该回调函数传递给子组件的 onChildData 属性。在子组件中，通过调用 onChildData 函数将数据传递给父组件。

需要注意的是，根据你的具体需求，你可以根据数据类型对回调函数进行类型定义。以上示例中的 any 类型可以根据实际情况进行替换。

精彩内容