Javascript 如何在react select组件上添加图标和工具提示？

我正在尝试在react select组件选项上添加图标和工具提示。下图是我试图实现的目标

代码

import React, { Component } from 'react';
import Select from 'react-select';

const websiteFilterFiedsOptions = [
    {value: '', label: 'Search and select website activity'},
    {value: 'page_visited', label: 'Page Visited'},
    {value: 'form_submitted', label: 'Form Submitted'}
]

export default class Website extends Component { 

    constructor(props) {
        super(props);
        this.state = {
            selectedFilter: ''
        }
    }

    filterSelectedData = function(data) {

    }

    render() {
        return <div className="form-group">
                    <h6 className="website_filter"><b>Filters</b></h6>
                    <div className="location-search field-width filed_width_custom">
                        <Select
                            value={this.state.selectedFilter}
                            onChange={(e) => this.filterSelectedData(e)}
                            options={ websiteFilterFiedsOptions }
                            placeholder="Search and select website activity"
                        />
                    </div>
                </div>;
    }
}

import React，{Component}来自'React'；
从“反应选择”导入选择；
const websiteFilterFiedsOptions=[
{值：''，标签：'搜索并选择网站活动'}，
{值：'page_visted'，标签：'page visted'}，
{值：'form_submitted'，标签：'form submitted'}
]
导出默认类网站扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedFilter:“”
}
}
filterSelectedData=函数（数据）{
}
render（）{
返回
过滤器
this.filterSelectedData（e）}
选项={websiteFilterFiedsOptions}
占位符=“搜索并选择网站活动”
/>
;
}
}

我认为您可以从中获得参考

我认为您可以通过使用图标值制作自己的组件和对象来尝试这种方法

---

您需要添加如下所示的组件，添加该组件仅用于演示目的的一个选项，您可以按照自己的方式对其进行样式设置

甚至可以使用可重用组件来生成标签，因为标签接受节点

我希望这能解决问题

{
    value: "page_visited",
    label: (
      <>
        <span style={{ paddingRight: "5px" }}>Page Visited</span>
        <FontAwesomeIcon icon="info" title={"Page Visited Option"} />
      </>
    )
  },

{
值：“已访问页面”，
标签：(
浏览网页
)
},

完整代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { faInfo, faCoffee } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

library.add(fab, faInfo, faCoffee);

const websiteFilterFiedsOptions = [
  { value: "", label: "Search and select website activity" },
  {
    value: "page_visited",
    label: (
      <>
        <span style={{ paddingRight: "5px" }}>Page Visited</span>
        <FontAwesomeIcon icon="info" title={"Page Visited Option"} />
      </>
    )
  },
  { value: "form_submitted", label: "Form Submitted" }
];

export default class Website extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFilter: ""
    };
  }

  filterSelectedData = function(data) {};

  render() {
    return (
      <div className="form-group">
        <h6 className="website_filter">
          <b>Filters</b>
        </h6>
        <div className="location-search field-width filed_width_custom">
          <Select
            value={this.state.selectedFilter}
            onChange={e => this.filterSelectedData(e)}
            options={websiteFilterFiedsOptions}
            placeholder="Search and select website activity"
          />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Website />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“反应选择”导入选择；
从“@fortawesome/fontawesome svg核心”导入{library}；
从“@fortwome/free brands svg icons”导入{fab}”；
从“@fortawesome/free solid svg icons”导入{faInfo，faCoffee}”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
库。添加（fab、faInfo、FACOFEE）；
const websiteFilterFiedsOptions=[
{value:，标签：“搜索并选择网站活动”}，
{
值：“已访问页面”，
标签：(
浏览网页
)
},
{值：“表单提交”，标签：“表单提交”}
];
导出默认类网站扩展组件{
建造师（道具）{
超级（道具）；
此.state={
selectedFilter:“
};
}
filterSelectedData=函数（数据）{}；
render（）{
返回(
过滤器
this.filterSelectedData（e）}
选项={websiteFilterFiedsOptions}
占位符=“搜索并选择网站活动”
/>
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

工作