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

时间:2019-12-12 13:09:02

标签: javascript node.js reactjs react-select

当我尝试使用此页面上提供的示例enter link description here时,使用<Directory your_project_directory> Options Indexes FollowSymLinks MultiViews AllowOverride None Order allow,deny Allow from all Require all granted RewriteEngine on RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule .* - [e=HTTP_AUTHORIZATION:%1] </Directory> 在第一行中以简单的方式返回“未知格式”

const color = chroma(data.color);

我不知道为什么这会发生在我这边。这很奇怪,因为在他们的示例页面中效果很好。

1 个答案:

答案 0 :(得分:0)

 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 })。如果 colorOption 对象中不存在颜色,则会通过错误“未知格式”

<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' },
      ]

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

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