如何在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事件，因此單元格被內部剪輯掩碼覆蓋：