Question

我正在尝试为React-Select创建一个自定义组件，我希望在选择框中显示的内容不只是label。类似于自定义占位符，选项，值和箭头组件部分here。问题是无法再访问源代码的链接，我发现样式文档非常糟糕。

假设我有这样的数据：

[
  {
    'id': 1,
    'label': 'Alpha',
    'gender': 'Male'
    'country': 'USA'
  },
  {
    'id': 2,
    'label': 'Beta',
    'gender': 'Male'
    'country': 'ENG'
  },
  {
    'id': 3,
    'label': 'Charlie',
    'gender': 'Female'
    'country': 'GER'
  }
]

我想在选择框中显示的内容如下：

Alpha-男性-美国

Beta-男性-ENG

Charlie-女-GER

但它仍应仅过滤标签，包括Alpha，Beta和Charlie。

现在我只能显示Alpha，Beta和Charlie。我正在尝试从文档here中了解如何执行此操作，但是例如，对于样式键及其作用没有定义。我可以在这里使用一些指导。

Answer 1

在您的“选择”上使用getOptionLabel道具：

const label = (option) => `${option.label} - ${option.gender} - ${option.country}`;

<Select getOptionLabel={label} />

在React-Select上创建自定义组件

1 个答案: