typescript props 父子组件传值

在 TypeScript 中，父组件向子组件传递值可以通过 props 实现。以下是一个简单的示例：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent count={count} onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

interface ChildProps {
  count: number;
  onIncrement: () => void;
}

const ChildComponent: React.FC<ChildProps> = ({ count, onIncrement }) => {
  return (
    <div>
      <p>{count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
};

export default ChildComponent;

在此示例中，父组件 `ParentComponent` 通过 `count` 和 `onIncrement` 两个 props 向子组件 `ChildComponent` 传递了数据和事件处理函数。子组件中通过解构赋值来获取这些 props，并在渲染时使用它们。父组件中的 `handleIncrement` 函数会更新 `count` 的值，并通过 `onIncrement` 事件处理函数传递给子组件。在子组件中，通过调用 `onIncrement` 函数来触发父组件中的更新操作。