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

Question

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

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

谢谢。

- gospodin

Answer 1

我实施了上述解决方案，结果破坏了可搜索的功能。标签期望一个字符串，而不是一个元素。-- 实际上有一种属性/函数可以做到这一点。

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

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

- Full Stack Alien

Answer 2

就像这样简单：

{ value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar &amp; foo' }} /> }

没有选项组件，没有选项渲染器，只有简单的JSX。

最初的回答

- Walid Ammar

---

谢谢您提供的简单解决方案！不过，这似乎会破坏 isSearchable，您有什么解决方法吗？ - Full Stack Alien

Answer 3

你可以为 react-select 创建自定义的 optionRenderer 或 optionComponent。

如果你只想将其转换为 HTML，我建议你使用 optionRenderer，因为它更简单。你可以在这里看到一个例子：

https://github.com/jquintozamora/react-taxonomypicker/blob/master/app/src/components/TaxonomyPicker/TaxonomyPicker.tsx#L135-L148

这里还有另一个optionComponent的例子（以防您需要额外的功能）： https://github.com/JedWatson/react-select/blob/master/examples/src/components/CustomComponents.js#L15

- José Quinto Zamora

---

你好，你的例子只是改变了选项渲染的方式，HTML依然无法被解释。我已经按照这里的说明使用自定义的optionRenderer来实现高亮显示：https://github.com/JedWatson/react-select/issues/5 - gospodin

Answer 4

您可以依靠react-select的“optionComponent”属性和React的dangerouslySetInnerHTML功能，并将一个像这样的组件传递给optionComponent。

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

- Anis Smail

---

哼，我不明白这个应该怎么运行。props.dangerouslySetInnerHTML必须是{__html: ...}的形式。 此外，我已经像这个例子中那样使用了optionRenderer来实现高亮显示：https://github.com/JedWatson/react-select/issues/5 - gospodin

使用以下代码段：dangerouslySetInnerHTML={{ __html: finalHtml }} - José Quinto Zamora