将属性子集传输到Typescript React中的子组件

interface ChildComponentProps {
  title: string;
  onClick: () => void;
}

type ChildComponentProps = {
  title: string;
  onClick: () => void;
};

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <ChildComponent title="Hello, World!" onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

interface ChildComponentProps {
  title: string;
  onClick: () => void;
}

const ChildComponent: React.FC<ChildComponentProps> = ({ title, onClick }) => {
  return (
    <div>
      <h1>{title}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
};

export default ChildComponent;

// 错误示例
<ChildComponent title={123} onClick={handleClick} />

// 正确示例
<ChildComponent title="Hello, World!" onClick={handleClick} />

// 错误示例
<ChildComponent />

// 正确示例
<ChildComponent title="Hello, World!" onClick={handleClick} />