react-select - 如何在 react-select 中隐藏选项

Question

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

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

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

Answer 1

您可以使用自定义选项来做到这一点，v2 的文档在这里:
https://react-select.com/components#replacing-components

但就您而言，我认为您应该向对象列表添加一些值，例如:

{标签:'示例'，值:'1234'，shouldBeDisplayed:'false'}

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

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

使用内部选择:

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

希望能帮助到你 :)