如何隐藏反应选择中的选项

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 }} ..... />

希望能帮助到你 ：）