React 如何实现子传父

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

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

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

interface ParentProps {
  // 父组件回调函数类型定义
  onChildData: (data: any) => void;
}

const ParentComponent: React.FC<ParentProps> = ({ onChildData }) => {
  const handleChildData = (data: any) => {
    // 处理子组件传递过来的数据
    // ...
  };

  return (
    <div>
      <ChildComponent onChildData={handleChildData} />
    </div>
  );
};

export default ParentComponent;

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

import React from "react";

interface ChildProps {
  onChildData: (data: any) => void;
}

const ChildComponent: React.FC<ChildProps> = ({ onChildData }) => {
  const handleClick = () => {
    const data = "子组件传递的数据";
    onChildData(data); // 调用父组件回调函数传递数据
  };

  return <button onClick={handleClick}>传递数据给父组件</button>;
};

export default ChildComponent;

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

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