Как добавить тег ссылки «a» с гиперссылкой в ​​приложении Reactjs

Question

У меня возникла проблема с добавлением гиперссылки на текст пользовательской ячейки. Я уже добавил тег в пользовательскую ячейку, но, как вы видите в изолированной программной среде кода, он, кажется, не работает, но тег «a» существует внутри тега div. Как я могу решить эту проблему?

Полный код и демонстрационные версии могут быть доступны с codeSandbox

Код 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>
    ),
  },
}

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

Реагирует на строки компонента DataTable со своими собственными событиями щелчка, поэтому ячейки закрываются внутренними масками клипа:

Answer 3

DataTable помещает ваш тег <a/> в div и некоторые другие оболочки. Когда вы щелкаете внутри <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>
    )
  },

Пожалуйста, прочитайте Datatables документы для более