如何在 Reactjs 应用程序中添加带有超链接的“a”链接标签答案

【问题标题】：How to add 'a' link tag with hyperlink in Reactjs app如何在 Reactjs 应用程序中添加带有超链接的“a”链接标签
【发布时间】：2023-03-22 00:44:01
【问题描述】：

我在将超链接添加到自定义单元格的文本时遇到了一些问题。我已经在自定义单元格中添加了一个标签，但正如您在代码沙箱中看到的那样，它似乎不起作用，但 div 标签内仍然存在“a”标签。我该如何解决这个问题？

完整的代码和演示可以通过codeSandbox访问

Code SandBox Link

我使用React-data-table-component 并按照正确的方式添加超链接，但它似乎不起作用。而且我不知道为什么它不起作用。它说它使用 JSX。

const columns = [
  {
    name: 'Coin Name',
    selector: 'key',
    sortable: true,
    cell: row => (
      <a
        href={'https://www.bithumb.com/trade/order/' + row.key}
        target="_blank"
        rel="noopener noreferrer">
        {row.key}
      </a>
    ),
  },
}

【问题讨论】：

标签： javascript node.js reactjs jsx

【解决方案1】：

React Data Table Component 默认有一个名为ignoreRowClick 的列属性，默认设置为false。这有助于onRowClicked 被不必要地触发。如果您将ignoreRowClick 设置为true，您的a 标签点击将起作用。

{
    name: 'Coin Name',
    selector: 'key',
    sortable: true,
    ignoreRowClick: true,
    cell: row => (
      <a
        href={'https://www.bithumb.com/trade/order/' + row.key}
        target="_blank"
        rel="noopener noreferrer">
        {row.key}
      </a>
    ),
  },

【讨论】：

布尔值不能设置为“否”，该列是是否需要，因此在文档中写为“否”。

【解决方案2】：

数据表正在用div 和其他一些包装器包装您的<a/> 标记。当您在内部单击<a/> 时，不会在该元素上而是在其父元素上生成单击（父元素定义对整行的单击）。如果你试试这个

<a href={"https://www.bithumb.com/trade/order/" + row.key}
   target="_blank"
   rel="noopener noreferrer"
   style={{ position: "absolute" }}>
   {row.key}
</a>

它会起作用，但这不是一个优化的解决方案。如果您查看数据表文档，您会发现一个名为 ignoreRowClick 的属性。这将防止整行的单击事件并激活单击特定列单元格。

所以代码是

{
    name: "Coin Name",
    selector: "key",
    sortable: true,
    ignoreRowClick: true,  // This is the change
    cell: row => (
      <a
        href={"https://www.bithumb.com/trade/order/" + row.key}
        target="_blank"
        rel="noopener noreferrer"
        style={{ position: "absolute" }}
      >
        {row.key}
      </a>
    )
  },

请阅读Datatables 文档了解更多信息

【讨论】：

【解决方案3】：

Reacts DataTable 组件行有自己的点击事件，因此单元格被内部剪辑掩码覆盖：

【讨论】：