react-select ：选择对象的条件样式答案

【问题标题】：react-select : Conditional styling of select objectsreact-select ：选择对象的条件样式
【发布时间】：2020-03-18 21:20:30
【问题描述】：

我正在从 react-select 中寻找一种非常具体的行为。我希望能够将自定义样式（背景颜色：“蓝色”）应用于组件下拉选项的特定子集。但是，似乎没有简单的方法可以做到这一点，因为我无法在样式属性中访问我需要的条件。

示例：所以，假设有 6 个选项。我希望其中三个选项具有基于条件为真的特定样式（不同颜色），而其他选项具有正常样式。

这是描绘我想要实现的目标的图片：

Dropdown, 3 blue 3 normal

感谢您的所有帮助。

let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
           { value:1, label:"Label2", shouldBeBlue:true },
           { value:2, label:"Label3", shouldBeBlue:true }, 
           { value:3, label:"Label4", shouldBeBlue:false },  
           { value:4, label:"Label5", shouldBeBlue:false },
           { value:5, label:"Label6", shouldBeBlue:false },
          ]

<Select
options={optionsIn}
/>

所以在这种情况下，Label1、Label2 和 Label3 在 react-select 中应该都有蓝色的背景色，但 Label4、Label5 和 Label6 应该正常渲染。

【问题讨论】：

嗨杜比。我建议你发布一些你的 React 代码。

标签： react-select

【解决方案1】：

找到答案。您可以使用 { data } 参数访问 options 属性：

      let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
       { value:1, label:"Label2", shouldBeBlue:true },
       { value:2, label:"Label3", shouldBeBlue:true }, 
       { value:3, label:"Label4", shouldBeBlue:false },  
       { value:4, label:"Label5", shouldBeBlue:false },
       { value:5, label:"Label6", shouldBeBlue:false },
      ]

                  <Select
                    options={optionsIn}
                    styles={{
                      option: (styles, { data }) => {
                        return {
                          ...styles,
                          backgroundColor: data.shouldBeBlue
                            ? "blue"
                            : undefined
                        };
                      }
                    }}
                  />

【讨论】：