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

Question

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

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

代码沙盒链接

我使用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>
    ),
  },
}

Answer 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>
    ),
  },

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

它将起作用，但这不是一个优化的解决方案。 如果您查看datatables文档，将会发现一个名为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>
    )
  },

请阅读数据表文档以获取更多信息

Answer 3

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