在对象方法中使用变量会导致“未知格式”答案

【问题标题】：Using variable in object method results in "Unknown Format"在对象方法中使用变量会导致“未知格式”
【发布时间】：2020-04-05 21:23:30
【问题描述】：

当我尝试使用此页面上提供的示例enter link description here 时，react 只需使用const color = chroma(data.color);在第一行返回“未知格式”即可

import chroma from "chroma-js";

const runeColorStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color); // First error is here
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',

      ':active': {
        ...styles[':active'],
        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
      },
    };
  },
  multiValue: (styles, { data }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: color.alpha(0.1).css(),
    };
  },
  multiValueLabel: (styles, { data }) => ({
    ...styles,
    color: data.color,
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: data.color,
    ':hover': {
      backgroundColor: data.color,
      color: 'white',
    },
  }),
};

我不知道为什么这会发生在我这边。这很奇怪，因为它在他们的示例页面中运行良好。

【问题讨论】：

只是想知道您是否找到了解决方案？

标签： javascript css reactjs colors react-select

【解决方案1】：

我在使用 CreatableSelect 并尝试键入新选项时想到了这一点。我使用const color = chroma(data.color ?? 'black'); 修复它。

【讨论】：

【解决方案2】：

 const color = chroma(data.color);

第一步是将您的颜色导入 chroma.js。这就是通用构造函数 chroma() 所做的。此函数尝试为您猜测输入颜色的格式。所以 data.color 需要一个有效的颜色。

 colourStyles = {
    control: styles => ({ ...styles, backgroundColor: 'white' }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
      const color = chroma(data.color);
      return {
        ......
      };
    }

您传递给选项的 colourOption 对象将作为数据提供 - option: (styles, { data, isDisabled, isFocused, isSelected })。如果颜色不存在于 colourOption 对象中，则会出现错误“Unknown Format”。

<Select className="basic-single" classNamePrefix="select" defaultValue={colourOptions[0]}
isDisabled={isDisabled} isLoading={isLoading} isClearable={isClearable}
isRtl={isRtl} isSearchable={isSearchable} name="color" 
options={colourOptions} <!-- colourOptions object -->
styles={colourStyles} />

colourOptions 对象：

   colourOptions:[
        { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
        { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
        { value: 'purple', label: 'Purple', color: '#5243AA' },
        { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
        { value: 'orange', label: 'Orange', color: '#FF8B00' },
        { value: 'yellow', label: 'Yellow', color: '#FFC400' },
        { value: 'green', label: 'Green', color: '#36B37E' },
        { value: 'forest', label: 'Forest', color: '#00875A' },
        { value: 'slate', label: 'Slate', color: '#253858' },
        { value: 'silver', label: 'Silver', color: '#666666' },
      ]

注意：确保 color 属性存在于 colourOptions 中。

工作演示：https://codesandbox.io/s/react-codesandboxer-example-zxqg0

【讨论】：