反应表中的图标答案

【问题标题】：Icons in react-table反应表中的图标
【发布时间】：2018-03-14 16:18:38
【问题描述】：

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

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

我已经尝试使用<i class='fa fa-cloud' /> 进行测试，但无法成功。

有什么想法吗？

【问题讨论】：

标签： reactjs icons react-table react-table-v6

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

所以在我的情况下，这些是我的专栏，我想传递一个很棒的字体！图标，它会根据第一列的值改变颜色（“red”会发出红色感叹号，“yellow”会发出黄色感叹号，等等）。
您通过 value传入的道具，以更改 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",
      },
    ]

【讨论】：