Question

我是制表者的新手，我试图在react制表器中向该列添加一个真棒字体的图标以及旁边写的一些文字（例如运行或已停止）。这是我的代码


    <ReactTabulator
                        ref={ref => (this.ref = ref)}
                        columns= {[
                            {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", headerSort:false,
                                cellClick:function(e, cell){
                                cell.getRow().toggleSelect();
                                }, width: 30},
                    { title: "Name", field: "name",},
                    { title: "Space", field: "space" },
                    { title: "Service Name", field: "service",  },
                    { title: "Status", field: "status", width: 130, formatter:function(){
                       return <FontAwesome icon={faCircle} color="green/> }},
                    { title: "Last Refreshed", field: "refresh",},
                    ]}

但不显示。我得到输出like this。

Answer 1

您需要导入并使用reactFormatter而不是“ formatter” 例如：

https://github.com/ngduc/react-tabulator/blob/master/src/ReactTabulatorExample.tsx#L23

Answer 2

那是因为您试图在表中使用react组件。

React只会在首次加载文档时解析HTML并将组件标签转换为HTML，因此之后无法使用JavaScript添加其他内容。

您将需要直接包含SCG或使用真棒的<i>字体标记方法。

如何在react-tabulator中显示图标？

2 个答案: