javascript - NextJs Link 组件包装图像在映射数组时会导致错误，除非在顶级页面组件中使用

Question

我正在尝试利用 NextJs 的 <Link />标签来包装 NextJs <Image />在我的应用程序中，映射数据数组。如果我放置 <Link />在顶级页面组件中，一切都运行良好并正确呈现。但是，如果我尝试将其抽象为子组件，然后将子组件嵌入到页面组件中，我会收到错误消息，告诉我 Error: Multiple children were passed to <Link> with 链接 of/测试 but only one child is supported https://nextjs.org/docs/messages/link-multiple-children除非我删除源代码中的所有换行符。

例如，这有效

// pages/index.js
import Link from 'next/link';
import Image from 'next/image';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                    {links.map(link => {
                        return <Link key={link.link} href={link.link}>
                            <a><Image src={link.imageUrl} width={400} height={400}/></a>
                        </Link>;
                    })
                    }
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

这也有效

// pages/index.js
import Links from '../components/Links';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                     <Links links={links}/>
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

// components/Links.js
import Image from 'next/image';
import Link from 'next/link';

export default function Links({links}) {
    return links.map(link => {
            return <Link key={link.link} href={link.link}><a><Image src={link.imageUrl} width={400} height={400}/></a></Link>;
        },
    );
}

但是这失败了

// pages/index.js
import Links from '../components/Links';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                     <Links links={links}/>
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

// components/Links.js
import Image from 'next/image';
import Link from 'next/link';

export default function Links({links}) {
    return links.map(link => {
            return <Link key={link.link} href={link.link}>
                <a>
                    <Image src={link.imageUrl} width={400} height={400}/>
                </a>
            </Link>;
        },
    );
}

感谢任何帮助!

Answer 1

我正在使用nextjs与 tailwindcss .
包裹时Image与 <></> ，当我将鼠标悬停在元素上并单击它时，我的鼠标没有变成一只小手。
当用 <a></a> 包裹时，即使使用 flex justify-center items-center，图像也不与其他元素对齐上Link (至少就我而言)。

这就是我的解决方案:

const iconSize=20;
<Link href="/">
      <div className="hover:cursor-pointer flex justify-center items-center">
            <Image
              src="/your_image.png"
              alt="clickable image"
              width={iconSize}
              height={iconSize}
            />
      </div>
</Link>

我的nextjs版本:

Next.js v12.2.3