React、typescript 和 prop-types：如何使用自己的類型？

Question

我有一個字符串類型文字，形式為type MyType = 'str1' | 'str2' | 'str3' type MyType = 'str1' | 'str2' | 'str3' type MyType = 'str1' | 'str2' | 'str3'並且我希望我的一個道具只接受這種類型，但我不知道如何告訴 PropTypes。

我曾嘗試使用propTypes.oneOf(['str1', 'str2', 'str3'])但隨后打字稿將其推斷為普通字符串，這是我不想要的。

Answer 1

由於這是使用 TypeScript 進行類型檢查，因此您不要嘗試在 React 運行時級別 ( propTypes ) 執行此操作，而是在 TypeScript 級別執行此操作。

您的組件應該在其 props 類型中使用您的字符串文字類型：

type MyComponentProps = {
    propName: MyType;
}

然后如果它是一個類組件：

class MyComponent extends React.Component<MyComponentProps, /*...your state type here...*/> {
    // ...
}

或者，如果您使用的是功能組件：

const MyComponent: React.FC<MyComponentProps> = ({propName}) => {
    // ...
};