如何使链接出现在我制作的组件上方？答案

【问题标题】：How do I make the Link appear above the component I made?如何使链接出现在我制作的组件上方？
【发布时间】：2021-07-31 04:11:30
【问题描述】：

如何使链接显示在我制作的组件上方？我使用 Next.js 11 版本。

这是错误信息。

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

这是我的源代码。

const data = [1, 2, 3, 4, 5, 6, 7, 8];

const ContentByMenu = () => {
    switch (menu) {
      case "asset": {
        return data.map((data, key) => {
          console.log(data, key);
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <TokenCard token={data} contents={data} key={key} />
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AccountCard account={data} key={key} />
            </Link>
          );
        });
      }
    }
  };

卡片组件只是简单的 ui 数据，而 const 数据是临时数据。我认为在链接中嵌入 comp 是错误的。我该怎么办？

【问题讨论】：

尝试在 Link 标签中嵌入标签。
在哪里使用 React ref？您能否澄清“如何使链接出现在我制作的组件上方”的意思？请将整个错误消息和堆栈跟踪以及所有相关代码添加到您的问题中。看来问题出在Link 组件中。
我不使用参考。如上所述，component 是一个简单的 ui 组件
嗯，这个错误意味着一个 React ref 被传递给一个函数组件并检查 Link 组件的渲染。这是一个很好的开始寻找的地方。您所指或提到的是一个简单的 UI 组件？ Link 组件？卡片组件（什么或哪个卡片组件）？
这是link 到Link 源代码。它不消耗或转发 React refs，所以我怀疑发生的事情是你可能错误地将 href 道具输入到 ref 道具中，也可能在形成代码时修复了错字 sn-p在你的问题中。您能否检查所有您的Link 组件并确认您没有将ref 属性传递给其中任何一个？

标签： reactjs next.js next-link

【解决方案1】：

首先，你应该导入链接

import Link from 'next/link';

那么你应该使用标签a

    const data = [1, 2, 3, 4, 5, 6, 7, 8];

    const ContentByMenu = () => {
        switch (menu) {
          case "asset": {
            return data.map((data, key) => {
              console.log(data, key);
              return (
                <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
             <a> 
<AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
</a>
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <a>
<TokenCard token={data} contents={data} key={key} />
</a>
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data, key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <a>
<AccountCard account={data} key={key} />
</a>
            </Link>
          );
        });
      }
    }
  };

【讨论】：