无法在React Bootstrap选项卡中显示图标而不是文本

Question

我正在使用React Bootstrap的标签，我遇到了一个问题，我无法将图标传递给标题道具     因为它显示为[Object] [Object]，对此有何看法？

const tabsInstance = (
  <Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title={`Tab1 ${<i class=" icon-remove"></i>}`}>Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

输出显示为：

  

Tab1 [对象] [对象]选项卡2选项卡3

如何在标签中显示icon而不是Title？

====== UPDATE ===== 建议后显示输出。

Answer 1

<Tab eventKey={1} title={`Tab1 ${<i class=" icon-remove"></i>}`}>Tab 1 content</Tab>

问题是模板文字将尝试评估React Object（由babel JSX语法转换）为字符串，这就是你得到的原因：Tab1 [Object][Object]。所以最后，你将一个String作为title道具传递。

要解决它，就这样传递一个React对象：

<Tab eventKey={1} title={<span>Tab1 <i className=" icon-remove" /> </span>}>Tab 1 content</Tab>

Answer 2

你试过这个吗？希望这可以帮到你

import { FaTrash } from "react-icons/lib/fa/";


<Tab
  eventKey={1}
  title={
   <span>
     <FaTrash />{" "}
   </span>
  }
>
    Tab 1 content
</Tab>

working example

Answer 3

import React, { Component } from 'react';
import Tabs from 'react-bootstrap/Tabs'
import Tab from 'react-bootstrap/Tab'

class App extends Component {
    render() {
        const clock = <i class="fa fa-Clock"></i>
        return (
            <div>
                <Tabs id="uncontrolled-tab-example">
                    <Tab  title={<span>{clock} Home</span>}>
                        Your Component
                    </Tab>
                    
                </Tabs>
            </div>
        )
    }
}

export default App;