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

【问题标题】：Unable to display icon in React Bootstrap Tab instead of text无法在 React Bootstrap 选项卡中显示图标而不是文本
【发布时间】：2018-03-24 10:41:48
【问题描述】：

我正在使用 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？

======更新===== 建议后显示的输出。

【问题讨论】：

标签： reactjs icons react-bootstrap

【解决方案1】：

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

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

要解决它，请以这种方式传递一个 React 对象：

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

【讨论】：

感谢您抽出宝贵时间回复，但它不起作用..：/ chrome 检查元素中的输出：Tab1
你是说这是标题？这很奇怪，因为 title 应该接受一个节点 react-bootstrap.github.io/components/tabs/#tabs-props-pane
是的，没错。这就是我所看到的。希望我可以将屏幕截图粘贴到评论部分无法
@johnsam 在图标上使用 className 而不是 class。

【解决方案2】：

你试过了吗？希望对你有帮助

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


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

working example

【讨论】：

【解决方案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;

【讨论】：