你如何從 React 組件中提取特定的 TypeScript prop 類型？

Question

我正在創建自己的 Image 組件，並希望將 React 的圖像組件ImageSourcePropType用於我的 source/previewSource 道具。

這是組件。

import React from 'react';
import { Image, ImageBackground } from 'react-native';

type ImageSourceProp = React.ComponentProps<typeof Image>.ImageSourcePropType; // HOW?

interface CachedImageProps {
  source: ImageSourceProp;
  previewSource: ImageSourceProp;
}

const CachedImage: React.FC<CachedImageProps> = ({ source, previewSource, ...remainingProps }) => {
  // console.log('TRIGGERED CachedImage')

  return (
    <ImageBackground source={previewSource|| source} fadeDuration={0} {...remainingProps}>
      <Image source={cachedSource} fadeDuration={0} {...remainingProps} />
    </ImageBackground>
  );
};

export default CachedImage;

我如何獲得ImageSourcePropType ？

Answer 1

好的，想通了這一點。 有兩種方法可以做到。

1. 通過名稱訪問。

    type ImageSourcePropType = React.ComponentProps<typeof Image>['source'];

2. 通過import訪問。

    import { ImageSourcePropType } from 'react-native';

   _{（帽子提示@kschaer）}