Question

无法将 react-color Saturation 与 @types/react-color 一起使用

2021-05-20

1308

reactjs typescript react-color

我正在尝试使用 react-color 库 (^2.19.3) 和 @types/react-color (^3.0.4) 创建自定义颜色选择器。由于 Saturation 组件未从类型 index 文件中导出，因此导入它的唯一方法是 react-color/lib/components/common 。使用 Saturation 类似（这个）：

<Saturation color={props.color} onChange={onChange} />

将触发错误 Uncaught TypeError: Cannot read property 'h' of undefined （类型与来自 react-color 库的原始 Saturation 不同）。

我创建了最小的示例（只需取消注释 Saturation 部分）。关于如何使用 Saturation 组件，您有什么想法吗？

Answer 1

传递 {...props 将解决您的问题，其中 props 具有颜色、hsl、hex、hsv 等。

color: "orange"
hsl: Object
    h: 38.82352941176471
    s: 1
    l: 0.5
    a: 1
hex: "#ffa500"
    rgb: Object
    r: 255
    g: 165
    b: 0
    a: 1
hsv: Object
    h: 38.82352941176471
    s: 1
    v: 1
    a: 1
oldHue: 38.82352941176471
source: undefined
onChange: ƒ () {}

我阅读了源代码，他们需要 hsl.h 、 hsl.v 、 hsl.s 来进行着色。 react-color 根据颜色计算出 hsl 和 hsv，只需要传递给其组件即可使用。

<Saturation
  {...props}
  onChange={(color: Color | ColorResult) => props.onChange?.(color)}
/>

这里是 codesandbox

https://codesandbox.io/s/silent-pond-vnsh6?file=/src/custom-theme-color-picker.tsx:865-875

Answer 2

我发现两个库的最新版本不兼容。安装 @types/ [email protected] 后，使用以下命令问题消失：

<Saturation hsl={props.hsl} hsv={props.hsv} ... />