2

我一直在努力寻找如何在 ReactTable 的单元格中显示图标（来自库 react-table）。我所能找到的只是它接受 HTML 符号。有很多符号，但我正在寻找的是显示标志......

Cell: () => (
  <span>&hearts;</span>
)

我已经尝试<i class='fa fa-cloud' />用于测试，但我无法使其工作。

有任何想法吗 ？

4

2 回答 2

1

经过一番挖掘，我发现它与列有关。

所以在我的情况下，这些是我的专栏，我想传递一个很棒的字体！图标，根据第一列的值改变颜色（“红色”会发出红色感叹号，“黄色”会发出黄色感叹号等）。
您通过传入的道具获取值，以更改 css 类并通过仅返回字体真棒图标来呈现图标。

    columns: [
      {
        accessor: "color",
        Header: "",
        Cell: (props) => (
          <FontAwesomeIcon
            icon={faExclamationCircle}
            className={"icon__" + props.value}
          />
        ),
      },
      {
        accessor: "employeeId",
        Header: "Employee ID",
      },
      {
        accessor: "cvfs",
        Header: "CVFS Net Change",
      },
      {
        accessor: "totalAlerts",
        Header: "Total Alerts",
      },
    ],
    data: [
      {
        employeeId: "11192",
        cvfs: -42,
        totalAlerts: 12,
        color: "red",
      },
      {
        employeeId: "12372",
        cvfs: -38,
        totalAlerts: 9,
        color: "red",
      },
      {
        employeeId: "17829",
        cvfs: -31,
        totalAlerts: 8,
        color: "orange",
      },
      {
        employeeId: "97283",
        cvfs: -22,
        totalAlerts: 6,
        color: "orange",
      },
      {
        employeeId: "76363",
        cvfs: -10,
        totalAlerts: 2,
        color: "yellow",
      },
    ]
于 2021-09-22T20:30:00.893 回答
1

我找到了一个库https://www.npmjs.com/package/react-flag-kit，它可以让 FlagIcons 以这种方式使用：

Cell: () => (
    <FlagIcon code="FR" size={20} />
)

React Icons<Icon />也可以在 Cell 中使用，但它不包含任何标志。

于 2018-03-15T09:21:06.130 回答