“没有 onclick 事件”的按钮可以嵌套在 NEXT JS 中的 Link 组件中

Question

将元素集成到 Next.js 组件中是否可以接受？我尝试了这种方法，并没有导致水合错误。这是推荐的做法，还是会导致任何潜在的问题？

<Link href={data.buttonUrl}
      target={data.isButtonUrlExternal ? '_blank' : '_self'}
      rel={data.isButtonUrlExternal ? 'noopener' : ''}
>
<button
      data-cy="marketing-box-button"
      className={classNames(
        'text-sm !px-5 max-w-fit uppercase',
        getButtonStyle(buttonStyle)
      )}
      variant="primary"
    >
      {buttonText}
    </button>
</Link>

Answer 1

确实，它不会导致水合错误并产生所需的结果，但它不遵循语义 HTML 的规则。

语义 HTML 是指使用正确的元素来完成正确的工作。链接用于导航，按钮用于提交表单或打开模式等操作。

在可访问性的情况下，它也可能会让屏幕阅读器感到困惑。

<Link>

在引擎盖下渲染

<a>

，它已经是交互式的，就像

<button>

一样。当你嵌套它们时，你本质上是在告诉浏览器，“嘿！这是另一个可点击的东西里面有一个可点击的东西。”这很令人困惑。有些屏幕阅读器可能会将其作为两个单独的控件读出，这对于可访问性来说不太好。

虽然嵌套

<button>

看起来似乎无害，但编写干净且语义化的 HTML 将使您的代码更加可靠和易于访问。这是一个小小的改变，但它却带来了很大的不同！

如果你想让链接看起来像一个按钮，你可以这样设计

<Link
  href={data.buttonUrl}
  target={data.isButtonUrlExternal ? '_blank' : undefined}
  rel={data.isButtonUrlExternal ? 'noopener' : undefined}
  className={classNames(
    'text-sm !px-5 max-w-fit uppercase',
    getButtonStyle(buttonStyle)
  )}
  data-cy="marketing-box-button"
>
  {buttonText}
</Link>