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

【问题标题】：React-Select: How to maintain search-ability while passing HTML to the label value in optionsReact-Select：如何在将 HTML 传递给选项中的标签值时保持搜索能力
【发布时间】：2020-07-28 21:49:00
【问题描述】：

我有一个可搜索的 react-select 字段，我在其中将 HTML 传递到 label 值。搜索在添加 HTML 之前有效，但可以理解的是，它不再有效。在将 HTML 传递给标签时，我可以做些什么来修复可搜索性？

这个帖子回答了我原来的问题（你能把 HTML 传递给标签吗）：react-select escapes html chars

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

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

如果你查看 react-select 的 GitHub 代码：https://github.com/JedWatson/react-select/blob/79c9e9deedaa57885d30aa8f19d1892d39e4d236/packages/react-select/src/types.js#L118

您将看到该标签仅支持字符串。我觉得你需要用到这个功能formatOptionLabel

<Select
    multi={true}
    options={this.state.options}
    onChange={this.handleOnChange.bind(this)}
    value={this.state.multiValue}
    formatOptionLabel={function(data) {
        return (
            <span dangerouslySetInnerHTML={{ __html: data.label }} />
        );
    }}
    isSearchable={true}
    placeholder="eee"
/>

【讨论】：