React select 反应选择:选择对象的条件样式

React select 反应选择:选择对象的条件样式,react-select,React Select,我正在从react select中寻找一种非常具体的行为。我希望能够将自定义样式(backgroundColor:“蓝色”)应用于组件下拉选项的特定子集。但是,似乎没有简单的方法可以做到这一点,因为我无法访问样式属性中需要的条件 例如: 因此,假设有6个选项。我希望其中三个选项有一个基于条件为真的特定样式(不同颜色),其他选项有正常样式 下面是一张我想要实现的图片: 谢谢你的帮助 let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:

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

例如: 因此,假设有6个选项。我希望其中三个选项有一个基于条件为真的特定样式(不同颜色),其他选项有正常样式

下面是一张我想要实现的图片:

谢谢你的帮助

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}
/>
let optionsIn=[{value:0,标签:“Label1”,shouldbeeblue:true},
{值:1,标签:“Label2”,应为蓝色:true},
{值:2,标签:“Label3”,应为蓝色:true},
{值:3,标签:“Label4”,应为蓝色:false},
{值:4,标签:“Label5”,应为蓝色:false},
{值:5,标签:“Label6”,应为蓝色:false},
]

因此,在本例中,Label1、Label2和Label3在react select中的背景色均应为蓝色,但Label4、Label5和Label6应正常渲染。

找到了答案。您可以使用{data}参数访问选项属性:

      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
                        };
                      }
                    }}
                  />
let optionsIn=[{value:0,标签:“Label1”,shouldbeeblue:true},
{值:1,标签:“Label2”,应为蓝色:true},
{值:2,标签:“Label3”,应为蓝色:true},
{值:3,标签:“Label4”,应为蓝色:false},
{值:4,标签:“Label5”,应为蓝色:false},
{值:5,标签:“Label6”,应为蓝色:false},
]
{
返回{
…风格,
背景颜色:data.shouldbeeblue
“蓝色”
:未定义
};
}
}}
/>

你好,杜比。我建议你发布一些代码。