如何在react-select中隐藏选项

Question

基本上，我有两个下拉菜单。基于在一个下拉列表中选择的值，我想在另一个下拉列表中显示某些选项。

我尝试将className参数以及标签和值参数添加到选项对象，并尝试将所有带有以上className的选项的显示设置为none，但没有将选项的className设置为我指定的选项。

[{'label':'x','value':'y',className:'hide'}]
.hide{
display:none
}

Answer 1

您可以使用自定义选项进行操作，第2版的文档位于： https://react-select.com/components#replacing-components

但是在您的情况下，我认为您应该为对象列表添加一些值，例如：

{标签：“示例”，值：“ 1234”，应该被显示：“假”}

下一步是自定义自定义选项：

const option = (props: OptionProps<any>) => (
  <div {...props.innerProps}>
    {props.data.shouldBeDisplayed? props.label : null}
  </div>
);

使用内部选择：

<Select components={{ Option: option }} ..... />

希望它会有所帮助:)