在 TypeScript 中,定义子组件的 props 通常有以下两种方式:
- 接口(Interface):
// 定义一个接口来描述 Props
interface MyComponentProps {
title: string;
items: string[];
onItemSelected: (item: string) => void;
}
// 在子组件中使用该接口
const MyComponent: React.FC<MyComponentProps> = ({ title, items, onItemSelected }) => (
// 组件内容...
);
这种方式清晰地定义了组件接受的 props 结构,并且可以在整个项目中重用这个接口。它使得代码具有更好的可读性和可维护性。
- 解构 Props 直接在函数参数中定义类型:
// 直接在子组件函数参数中定义 Props 类型
const MyComponent: React.FC<{
title: string;
items: string[];
onItemSelected: (item: string) => void;
}> = ({ title, items, onItemSelected }) => (
// 组件内容...
);
这种做法更加简洁,但如果你的组件 Props 复杂或者需要在多个地方复用时,可能会造成代码重复。
综合来看,推荐优先使用接口(Interface)的方式来定义 Props,这样可以更好地组织和管理类型,并支持在整个项目中共享和复用类型定义。
尤其是在大型项目或团队协作中,良好的类型组织结构有助于提升代码质量与开发效率。不过,在一些小型项目或简单组件中,直接在函数参数中定义类型也是可行的。