如何使用FONT AWACYICON图标与扩展 /合同进行反应表V7？

发布于 2025-01-31 21:04:37 字数 1184 浏览 4 评论 0原文

我正在尝试使用React-Table及其扩展/合同功能，但无法弄清楚如何替换文档中给出的图标。我正在尝试使用字体引人入胜的图标，但是即使使用DangernlySetinnerhtml，我也会得到一个字符串，而不是图标。这是文档中的示例： https：//reactt-tps：//react-tpable.tanstack。 com/docs/示例/sub-components

这是CodesandBox： https://codesandbox.io/s/github/github/github/tannerlinsley/react-table/react-table/tree/tree/tree/tree/tree/v7/exub-compornents/sub-components?file =/src/app.js：3192-3633

这是相关的块。我可以添加一个简单的字符串来替换手指，'＆gt;'和'^'，但需要使用跨度图标（font很棒）：

 {
        // 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 ? '

原文

I'm attempting to use react-table and its expand/contract functionality, but can't figure out how to replace the icon given in the documentation. I'm trying to use a font-awesome icon, but even with dangerouslySetInnerHTML I get a string, instead of the icon. Here is the example in the documentation: https://react-table.tanstack.com/docs/examples/sub-components

Here is the codesandbox: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/sub-components?file=/src/App.js:3192-3633

This is the block in question. I can add a simple string to replace the fingers, by '>' and '^' but need to use a span icon (font awesome):

 {
        // 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>
        ),
      },

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫之都 2025-02-07 21:04:37

您不能使用跨度。应该是＆lt; fontaweshoneicon iCon = {..} /＆gt; < /code>。这是工作 codesandbox 带有>字体很棒。您必须关注安装 steps 。发布该-TOUPTUN-

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>
)

“与字体可观的反应”

You can't use span. Should be <FontAwesomeIcon icon={..} />.
Here is the working codesandbox with font awesome. You must follow installation steps. Post that -

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>
)

Output -