next.js报错Error: React.Children.only expected to receive a single React element child.(已解决)

最新推荐文章于 2024-06-13 22:23:26 发布
最新推荐文章于 2024-06-13 22:23:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： 我的碎屑世界 # SSR # React 文章标签： react.js javascript 前端 next.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lllomh/article/details/121270280
版权
我的碎屑世界 同时被 3 个专栏收录
71 篇文章 1 订阅
订阅专栏
React
28 篇文章 0 订阅
订阅专栏
SSR
21 篇文章 1 订阅
订阅专栏

next.js 报错 

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

 

 

 

这个只要把里面的 Link 标签换 a 就可以了, 效果都一样的, Link标签最后也是会渲染成a标签的

lllomh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil
高级前端工程师
02-01 2234
react，ant design pro，react报错React.createElement，报错怎么办，详细解决办法，如何解决浏览器控制台报错，如何解决ant组件库报错，使用ant design pro创建组件时报错Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got
react使用antd中的＜Dropdown/＞组件报错：`React.Children.only expected to receive a single React element child.`
vivisol的博客
01-22 1953
react使用antd的报错：`React.Children.only expected to receive a single React element child.`
【React】React.Children.only expected to receive a single React element child
weixin_52598228的博客
10-31 635
但是呢又有新的问题，就是触发下拉框的时候，又出现了这个bug，发现DropDown的menu接受的变量名必须叫做items，出现这个bug的原因在与dropDown只能接受一个根元素因此把。改成用一个div标签包着。
Error: React.Children.only expected to receive a single React element child.
最新发布
chen的博客
06-13 754
是一个用于获取一个组件的所有子元素中的首个元素的函数，并且它会抛出错误，如果传入的不是单一的子元素。函数时，传入了多个子元素或者没有传入任何子元素，而这个函数只期望接收一个单一的 React 元素作为子节点。的地方，并确保父组件只传递一个子元素。如果需要传递多个子元素，可以使用。如果你的组件应该只接收一个子元素，但实际接收了多个或没有，那么。你应该修改父组件，只传递一个子元素给。中使用不同的逻辑来处理多个子元素。要解决这个问题，你应该检查使用。或其他相关函数来处理它们。简单而言：注意你是不是加了。
Error: React.Children.only expected to receive a single React element child
qq_40896095的博客
08-19 1023
出现这样的问题是千奇百怪的，可能是你在render函数中return的标签中的注释有问题，也可能是你在利用引入动态变量的时候方式不对 本文连接：点击 博主个人小博客：嘿嘿
Next.js报错之 Error: connect ECONNREFUSED 127.0.0.1:80 【接口代理】
bidang3275的博客
06-23 3948
Error: connect ECONNREFUSED 127.0.0.1:80 报错的完整代码 import React from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; const Index = props => { return <div>Index</div>; }; Index.propTypes = {}; Index.getInitialPr
【React】报错：react.development.js:315 Warning: React.createElement: type is invalid。。。
all_might1的博客
03-10 2047
目录 一、问题描述 二、问题原因分析 三、问题解决 四、总结 一、问题描述 今天写新需求的时候，老js文件中动辄几千行，前人把好多东西都揉在一起。想着新功能就写在新的js文件中好了。 于是引用了新的js文件，可是报出了如下错误 二、问题原因分析 隐约知道应该是引入方面或者是导出方面的问题，但是也没有准确定位到在哪里有问题 最后在网上检索了下相关问题，好像也不是很沾边 于是又看了看代码，很明显发现ctrl点击的时候不跳转，鼠标悬浮其上出现的信息有问题。那就一定是引..
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
小技巧——yarn 报错 ： error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
qq_43201350的博客
01-14 1985
小技巧——yarn 报错 ： error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
React.Children.only expected to receive a single React element child.【react-transition-group】
m0_58981357的博客
12-20 830
【react-transition-group】Uncaught Error: React.Children.only expected to receive a single React element child.
React报错Error: React.Children.only expected to receive a single React element child.
all_might1的博客
08-05 1632
在用react-transition-group的时候报错Error: React.Children.only expected to receive a single React element child. 在网上找的时候看到有很多是因为注释的问题，于是将注释全都删除，还是进行报错 之后就各种找错，有的没的改了一推 最后发现是因为in、timeout的属性没有写在<CSSTransition>里，我都服了我自己了 最玄幻的是，编译竟然每次都是成功的，我就说为什么这些属..
next Error: React.Children.only expected to receive a single React element child
qq_36990322的博客
12-13 335
next中的报错 如下图 原因 很常见的报错，next的组件下只能存在一个元素，以Link为例： case本身是一个jsx元素，span也是一个jsx元素，所以报错 ... <Link > case <span>1</span> </Link> ... 解决办法 使其变成一个整体jsx元素就行了，无论你用啥包裹，空元素或者其他标签都行 ... <Link > <> case <span>1</span&gt
ReactNative使用TabBar报错react.children.only expected to receive a single react element child
meiyulong518的博客
04-25 9590
ReactNative使用TabBar报错react.children.only expected to receive a single react element child实例代码： <TabBarIOS.Item title="首页" icon={require('./img/动态副本.png')} selected=
React-next.js中渲染变量的坑报错Error: React.Children.only expected to receive a single React element child.
lllomh的博客
11-01 2328
这个问题再 react 前端渲染的时候是没有问题的，但是在next的项目中会出现： 在字段中类型不一样的时候，如果你写的是： 会导致报出奇怪的错误，很难定位的那种如图： 会直接报前面 setState 的错误，确实让人摸不着头脑。 --------分割线------------------------------ 后来发现，是类型的问题，这render 好像只能渲染字符串的数据：于是乎改成: 转为字符串成功,不再报之前的错误了! 至此:解决该问题 ...
React.Children.only expected to receive a single React element child
qq_38719039的博客
03-04 1045
http://blog.csdn.net/meiyulong518/article/details/70748903ReactNative使用TabBar报错react.children.only expected to receive a single react element child实例代码： &lt;TabBarIOS.Item title="首页" ...
t.js:1229 Uncaught Error: React.Children.only expected to receive a single React element child. at Object.onlyChild [as only] (react.development.js:1229:1) at renderOverlay (dropdown.js:138:1) at Overlay.js:10:1 at mountMemo (react-dom.development.js:17225:1) at Object.useMemo (react-dom.development.js:17670:1) at useMemo (react.development.js:1650:1) at Overlay.js:7:1 at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-do
05-28
根据错误提示，这是因为在 Dropdown 中的 Menu 组件中存在多个子元素，而 Ant Design 的 Dropdown 组件只允许 Menu 组件中包含一个子元素。你可以检查一下代码，确保 Menu 组件只有一个子元素。 如果你希望在 Dropdown 中展示多个菜单项，可以使用 MenuItem 或者 Menu.ItemGroup 组件，将它们作为 Menu 组件的子组件来添加。以下是一个示例代码： ``` import { Dropdown, Menu } from 'antd'; const menu = ( <Menu> <Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item> </Menu> ); <Dropdown overlay={menu}> <a className="ant-dropdown-link" onClick={e => e.preventDefault()}> Hover me </a> </Dropdown> ``` 这里的 menu 变量是一个包含多个 MenuItem 的 Menu 组件。注意，Menu 组件必须作为 Dropdown 组件的 overlay 属性传入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值