reactjs 在react/typescript中处理prop函数参数的最佳方法是什么？

iaqfqrcu 于 2023-02-03 发布在 React

关注(0)|答案(1)|浏览(150)

说我有这个

type Props = {
  onClose: () => void
} 
const MyComponent = ({ onClose }: Props) => {
 // my component
}

但是onClose理论上可以取任何函数，可能有一个参数。
所以我可以做：onClose: (arg) => void，但如果有时此类型为string，有时为number等，该怎么办
我能想到的唯一方法是使用泛型，但这会很麻烦，我不得不这样做：

type Props<T> = {
  onClose: (arg: T) => void
} 
const MyComponent<T> = ({ onClose }: Props<T>) => {
 // my component
}

如果我有很多函数，那会有很多泛型。有没有更好/更干净的方法来处理这个问题？（我也不想使用any）

1条答案

如果它可以是任何东西，那么类型就是any。只要把参数设置为可选即可。另外，使用类型定义FC，而不是在props上设置它。当你这样做的时候，你可以得到组件用法的类型推断。

type Props = {
    onClose: (arg?: any) => void
}

const MyComponent: React.FC<Props> = ({ onClose }) => {
    // my component
}