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

next.js项目,开发环境,运行的时候报错了:

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

看到这个提示,应该都会知道React组件中的Children参数希望接收1个React子元素,那么报异常的原因就可能是我代码中传递了多个子元素.贴代码:

layout.jsx布局文件

import Header from "../components/header/header";
import Footer from "../components/footer/footer";
import LayoutStyle from "./layout.module.css";
function Layout({ children }) {
    return (<div className={LayoutStyle.container}>
        <Header />
            {children}
        <Footer />
    </div>);
}
export default Layout;

在这个布局文件中,引入了Header、Footer组件,

再看下引入的组件,Header组件:

import Link from "next/link";
import HeaderStyle from "./header.module.css";
function Header() {
    return (
        <div className="header">
            <div className="inn">
                <div className="fl">
                    {/* logo */}
                    <div className="logo">
                        <img src="/images/logo.png" alt="" />
                    </div>
                    {/* 切换城市 */}
                    <div className="city">
                        <span className="text">北京</span>
                        <span className="icon icon-sanjiao"></span>
                    </div>
                    {/* 咨询热线 */}
                    <div className="hot-line">
                        <p>咨询热线：<em>400-010-8987</em></p>
                    </div>
                </div>
                <div className="fr">
                    <div className="user">
                        <Link href="#">
                            <span className="icon icon-user"></span>
                            <span className="text">登录</span>
                        </Link>
                    </div>
                    {/* 下载app入口 */}
                    <div className="download">
                        <span className="icon icon-app"></span>
                        <span className="text">下载app</span>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Header;

开始看了很久,也没有发现问题,最后还是根据异常提示来找问题,就是React组件,它希望接收1个子元素,然后就找到了Link组件,

<Link href="#">
    <span className="icon icon-user"></span>
    <span className="text">登录</span>
</Link>

Link是React组件,它这里有了2个直接的子元素,Link本来应该表示一个链接,应该有一个表示链接的子元素才对,所以我想的是这里应该把两个span包裹一层,加个a标签,这样,Link就只有了一个直接的子元素了,而且也会明确链接的元素,我尝试了一下,问题解决.

Next.js项目中,同样的道理在React项目中,需要多加注意React元素和DOM元素.