如何在 Nextjs 中将组件导入为按钮？

Question

我的这个组件有一个在多个页面中使用的内部 link

当我尝试将它作为按钮导入 Nextjs 应用程序时，我得到了这个结果，它在背景中呈现样式锚 link 和按钮

在 React 应用程序中使用完全相同的代码，我得到了想要的结果

看起来道具“as”出于某种原因正在将组件呈现为按钮以及组件内的锚点，这在常规 React 版本中不会发生

Answer 1

我怀疑您在“常规 React 版本”中有不同的样式。

您的组件将始终呈现 <a>，因为这是硬编码的。如果想使用<a>作为默认组件进行渲染，可以为as定义一个默认值属性，不需要嵌套<a>.

例如：

const Comp=({as: Component = 'a', ...rest}) => {
 return <Component {...rest}>Foobar</Component>
}

然后下面的用法将呈现 <a> 和 <button>:

      <Comp />
      <Comp as="button" />