通过props传递的组件的React和TypeScript用法

// 定义子组件的props类型
interface ChildComponentProps {
  name: string;
  age: number;
  onClick: () => void;
}

// 子组件
const ChildComponent: React.FC<ChildComponentProps> = (props) => {
  const { name, age, onClick } = props;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
};

// 父组件
const ParentComponent: React.FC = () => {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent name="John" age={25} onClick={handleClick} />
    </div>
  );
};