0

我有一个十六进制值数组：

const presetColors = [
    '#E91E63',
    '#FF8A65',
    '#F8E71C',
    '#697689',
    '#37D67A',
    '#D9E3F0',
    '#BD10E0',
    '#9013FE',
    '#4A90E2',
    '#50E3C2',
    '#000000',
    '#4A4A4A',
    '#FFFFFF',
]

我正在使用一个库https://github.com/sindresorhus/hex-rgb将十六进制转换为 rgb。

我有一个SwatchesPicker接受的功能presetColors：

type SwatchesPickerProps = {
    color: string
    onChange: (newColor: string) => void
    presetColors: Array<string>
}

const SwatchesPicker = ({ color, onChange, presetColors }: SwatchesPickerProps) => {
    return null;
}

<SwatchesPicker
  color={color}
  onChange={setColor}
  presetColors={presetColors.map((color) => hexRgb(color))}
/>

现在我在说明时遇到错误presetColors：

类型 'RgbaObject[]' 不能分配给类型 'string[]'。类型 'RgbaObject' 不可分配给类型 'string'.ts(2322)

原因是hexRgb(color)返回RgbaObject[]并presetColors接受string[]。

那么如何转换RgbaObject[]为string[]?

4

1 回答 1

0

我创建了一个简单的hex2rgb函数作为hex-rgb返回{ red: number, green: number, blue: number, alpha: number}。

我用于颜色选择器的库叫做react-colorful需要{ r: number, g: number, b: number, a: number}作为输入，所以下面的函数就是这样做的。

import hexRgb from 'hex-rgb'

export const hex2rgb = (color: string) => {
    const { red: r, green: g, blue: b, alpha: a } = hexRgb(color)
    return { r, g, b, a }
}

然后我全部转换string为Rgba：

type Rgba = {
    r: number
    g: number
    b: number
    a: number
}

type SwatchesPickerProps = {
    color: Rgba
    onChange: (newColor: Rgba) => void
    presetColors: Array<Rgba>
}

<SwatchesPicker color={color} onChange={setColor} presetColors={presetColors.map(hex2rgb)} />

这成功了:)

于 2021-01-24T09:47:44.937 回答