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

Question

如何使链接出现在我制作的组件上方？我使用 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>
          );
        });
      }
    }
  };

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

Answer 1

首先，您应该导入 Link

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>
          );
        });
      }
    }
  };