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

Question

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

我原来的问题的答案（你能把 HTML 传给标签吗）是这样 post 回答的：react-select escapes html chars

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

Answer 1

如果你查看 react-GitHub 的代码-select：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"
/>

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

React-Select: How to maintain search-ability while passing HTML to the label value in options

reactjs

react-select