如何使用React Select向选项添加自定义道具？

Question

我的目标是在用户展开菜单并将鼠标悬停在列出的项目上时添加工具提示。为此，我需要在菜单项中添加data-tip和data-for。

我传递给React Select的options如下所示：

  [
    { value: 1, label: 'Onw' },
    { value: 2, label: 'Two' },]

我想在那里添加道具信息，但我认为没有办法。我是否需要自定义每个选项的呈现？任何有关如何做到这一点的提示将不胜感激。感谢。

Answer 1

您只需将自定义Option包装在函数中，然后为其分配自定义道具

components={{ Option: (optionProps) => <Option {...optionProps} onEditItem={onEditItem}
    onDeleteItem={onDeleteItem} />  }}