Next.js：错误：React.Children.only 预期接收单个 React 元素子项

Posted 2023-02-22

【中文标题】Next.js：错误：React.Children.only 预期接收单个 React 元素子项

【英文标题】：Next.js: Error: React.Children.only expected to receive a single React element child

【发布时间】：2020-08-22 09:04:03

【问题描述】：

我在components 目录中有一个名为Nav 的组件，它的代码如下所示：

import Link from 'next/link';

const Nav = () => 
    return(
        <div>
            <Link href="/">  <a> Home </a> </Link>
            <Link href="/about"> <a> About </a>  </Link>
        </div>
    )


export default Nav;

这给了我错误：

Error: React.Children.only expected to receive a single React element child.

但是，如果我删除 <Link> 组件中的 <a> 标记，我可以查看页面，但是在控制台中我会收到以下警告：

Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

那么我在这里做错了什么？

【问题讨论】：

看起来不错。你确定你在这里收到了孩子的错误，而不是在其他地方......

删除Link标签和a标签之间的空格。然后给它，<Link href="/"><a> Home </a></Link> <Link href="/about"><a> About </a></Link>

哇谢谢@ManirajMurugan，它解决了这个问题。但这很奇怪有一个空间导致这个问题。现在我什至尝试将 也放在单独的行中，这也没有引起任何问题。无论如何谢谢:)

@AshanPriyadarshana，下一行不被视为空格，但如果两个标签之间有空格，则被视为子节点 .. 已发布答案并附有删除原因的解释之间的空白..希望它有所帮助..

我在 Link 标签中有一个评论，然后它被认为是一个子节点，破坏了我的整个应用程序。奇怪的东西...

【参考方案1】：

此问题是由于<Link> 标记和<a> 标记之间的空格。

所以改变你的代码，

        <div>
            <Link href="/"><a> Home </a></Link>
            <Link href="/about"><a> About </a></Link>
        </div>

更改原因：

-> <Link> 只能有一个子节点，这里link 和a 标签之间的空格被视为子节点。

->所以有两个子节点（一个是空格，另一个是<a>标签）是无效的，因此会发生这种错误。

【讨论】：

在我的情况下，我认为罪魁祸首是标签后的空格，然后是注释：(</div> /* So what this does is... */) 谢谢。那些 <React.Fragment>/<></> 和 <TransitionGroup> 标签并没有起到作用

我能够用这个解决方案解决它，但我仍然需要更多地说明为什么将空间视为子节点。

【参考方案2】：

和 之间的空格会让你出错“未处理的运行时错误 错误：多个孩子被传递给 href 的 / 但只支持一个孩子 https://nextjs.org/docs/messages/link-multiple-children 打开浏览器的控制台以查看组件堆栈跟踪。” 删除空间，它工作正常！！！

       import Link from "next/link";

const NavBar = () => 返回 （

       <Link href="/"><a>Home </a></Link>
       <Link href="/About"><a>About </a></Link>
        <Link href="/Contact"><a>Contact </a></Link>
    </nav>
)

导出默认导航栏

【参考方案3】：

我遇到了同样的问题：

<Link href=`/tutorial/$tutorial.slug`>tutorial.title</Link>

解决方法是将其包装在 a 标签中：

<Link href=`/tutorial/$tutorial.slug`><a>tutorial.title</a></Link>

【参考方案4】：

我有一个空间被认为是未定义的组件

<Link href=to><a className='abc'>children</a> </Link>

删除空间，没关系。多亏了经验和互联网帮助，仅损失了 30 分钟。