React-select：如何在选项中显示 HTML

Question

我想知道react-select是否可以在渲染选项中显示html。例如，如果获取的ajax选项有<b>text</b>，我希望在下拉菜单中看到粗体文本而不是看到<b>text</b>。

我阅读了文档，但没有找到任何选项。

谢谢

Answer 1

我实现了上述解决方案，但它破坏了可搜索功能。标签需要一个字符串，而不是一个元素。-- 实际上有一个 prop/function 可以做到这一点

formatOptionLabel={function(data) {
  return (
    <span dangerouslySetInnerHTML={{ __html: data.label }} />
  );
}}

查看这篇文章：React-Select：如何在将 HTML 传递给选项中的标签值时保持搜索能力

Answer 2

您可以依靠optionComponentreact-select的prop和React的dangerouslySetInnerHTML功能并给予optionComponent这样的组件

const MyOptionComponent = props => <span dangerouslySetInnerHTML={{__html : props.option}} />;