如何使用字体真棒图标来反应-table v7 扩展/收缩？

Question

我正在尝试使用 react-table 及其 expand/contract 功能，但无法弄清楚如何替换文档中给出的图标。我正在尝试使用字体超棒的图标，但即使使用 dangerouslySetInnerHTML 我也会得到一个字符串，而不是图标。这是文档中的示例：https://react-table.tanstack.com/docs/examples/sub-components

这是代码框：https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/sub-components?file=/src/App.js:3192-3633

这是有问题的块。我可以通过“>”和“^”添加一个简单的字符串来替换手指，但需要使用跨度图标（字体很棒）：

 {
        // Make an expander cell
        Header: () => null, // No header
        id: 'expander', // It needs an ID
        Cell: ({ row }) => (
          // Use Cell to render an expander for each row.
          // We can use the getToggleRowExpandedProps prop-getter
          // to build the expander.
          <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? '' : ''}
          </span>
        ),
      },

Answer 1

您不能使用 span。应该是<FontAwesomeIcon icon={..} />。 这是工作 codesandbox with font awesome. You must follow installation steps。 Post 那 -

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleRight, faAngleUp } from "@fortawesome/free-solid-svg-icons";

Cell: ({ row }) => (
// Use Cell to render an expander for each row.
// We can use the getToggleRowExpandedProps prop-getter
// to build the expander.
  <span {...row.getToggleRowExpandedProps()}>
    {row.isExpanded ? (
      <FontAwesomeIcon icon={faAngleUp} />
    ) : (
      <FontAwesomeIcon icon={faAngleRight} />
    )}
  </span>
)

输出-