我正在使用mdbreact npm与next.js的反应数据表，我想添加fa图标的标题，但我不能这样做

Question

我正在使用mdbreact npm的数据表与next.js，我想添加fa fa排序图标与标题，但它不工作下面是我的代码，我已经尝试过它与CSS：

// This is how i import mdbreact after installation :- 
import { MDBDataTable, MDBBtn, MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';

// These Are The Heading Of The Table :-
const columns = 
[
{ label: 'Customer Tag' + <i class="fa fa-sort" aria-hidden="true"></i>, field: 'Customer_Tag', sort: 'asc', width: 150 },
{ label: 'Discount Type', field: 'Discount_Type', sort: 'asc', width: 270 },
{ label: 'Discount Condition', field: 'Discount_Condition', sort: 'asc', width: 200 },
{ label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 },
{ label: 'Action', field: 'action', sort: 'disabled', width: 100 },
];

//这是我的MDBreact表返回()

Answer 1

label的值应该是一个字符串，所以我怀疑这就是它不能工作的原因。文档地址：https://mdbootstrap.com/docs/react/tables/datatables/

你将不能使用字体很棒的类名，因为你不能在标签中放置一个元素。

我没有一个好的解决方案，但这里有两个选择：

我为我的数据表使用了react-table，并且能够执行您正在尝试的操作。考虑切换到react-table。

在这种情况下，不要使用很棒的字体，尝试查找一个具有相同含义的html实体，比如下面这个列表中的内容：https://dev.w3.org/html5/html-author/charref

Answer 2

我用实体解决了这个问题，下面是我的代码：

const列=[{ label:客户标签⇵，字段：' Customer _ Tag '，排序：'asc'，宽度: 270，属性：{className：“快速排序”} }，{ label:折扣类型⇵，字段：' Discount _ Type '，排序：'asc'，宽度: 270 }，{ label:折扣条件⇵，字段：‘Discount _⇵’，排序：'asc'，宽度: 200 }，{ label：‘启用/禁用’，字段：‘状态’，排序：‘禁用’，宽度: 100 }，{标签：‘动作’，字段：‘动作’，排序：‘禁用’，宽度: 100 }，

]；