react-select转义html字符

Question

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

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

谢谢

Answer 1

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

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

查看此帖子：React-Select: How to maintain search-ability while passing HTML to the label value in options

Answer 2

你可以依靠反应选择的optionComponent道具和反应的dangerouslySetInnerHTML feature 并将optionComponent这样的组件提供给

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

Answer 3

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

如果您只想将转换为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

Answer 4

很简单：

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

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