React Hooks在子级中继承父状态和函数类型的TypeScript

import React, { useState } from 'react';

// 定义父组件的状态和函数类型
type ParentState = {
  count: number;
};

type ParentActions = {
  increment: () => void;
};

// 父组件
const ParentComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  // 定义父组件的函数
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent state={count} actions={{ increment }} />
    </div>
  );
};

// 子组件
const ChildComponent: React.FC<{ state: number; actions: ParentActions }> = ({ state, actions }) => {
  // 子组件可以直接使用父组件传递的状态和函数
  const { increment } = actions;

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count from parent: {state}</p>
    </div>
  );
};

export default ParentComponent;