Functions are not valid as a React child. This may happen if you return a Component instead of 「Comp

最新推荐文章于 2024-10-31 00:53:19 发布
原创 最新推荐文章于 2024-10-31 00:53:19 发布 · 8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解析了一个常见的React开发错误：尝试将组件作为普通对象渲染，而非作为JSX元素。通过一个具体的例子，即FooterForm组件的不当使用，阐述了如何避免此类错误，强调正确的组件调用方式。

控制台报错

 

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

 

使用一个{} 去渲染一个组件 就会报这样一个错误

FooterForm 是一个组件

使用时不小心写成了 {FooterForm}  所以报上面的错误

应该将 {FooterForm}  改为  <FooterForm/>

 

react - Ant Design Pro 报错Warning: React.createElement: type is invalid – expected a string (for buil
高级前端工程师
02-01 2933
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
Relocations for this machine are not implemented，IDA版本过低导致打开二进制文件时生成汇编代码失败
dvlinker的技术专栏
12-19 1万+
本文详细讲述IDA版本过低导致生成汇编代码失败问题的排查过程，并以一个具体的安卓app崩溃的案例阐述如何使用IDA查看汇编代码去快速定位C++源码中的问题。
React 报错 Functions are not valid as a React child. This may happen if you return a Component
清云
03-31 3194
React 报错 Functions are not valid as a React child. This may happen if you return a Component
Functions are not valid as a React child. This may happen if you return a Component instead of
树上骑个猴的博客
06-26 3328
报错信息：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...
react 使用useRoutes遇到的问题
Lora_0925的博客
07-01 3838
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
react常见报错之一：Functions are not valid as a React child. This may happen if you return a Co...
m0_57169857的博客
07-05 6168
先看报错信息： 解决方案： react操作渲染DOM，利用jsx，在写html结构较为复杂时，就需要用到一个函数来装它 我在报这个错误后，找了一会，才发现是自己调用函数没有加括号，这是个大坑，虽然没有任何难度，但是贼容易踩 古人云：坑踩多了，就避开了。。。 ...
RN Exception: Warning: Functions are not valid as a React child. This may happen if you return a ...
hzxOnlineOk的博客
03-16 744
异常 ReactNativeJS: Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function ra...
Objects are not valid as a React child (found: [object HTMLDivElement])
游海东的技术专栏
05-21 3338
1、错误描述 2、错误原因 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<Ap...
create-react-app和electron报错fs.existsSync is not a function
zoepriselife316的博客
05-07 2万+
将create-react-app与electron创建出的一个项目中。React中无法使用electron 当在React中使用require(‘electron’)时就会报 TypeError: fs.existsSync is not a function的错误。 因为React中无法使用Node.js的模块. 所以，百度了下：方案如下 创建renderer.js文件 global.el...
【React】React18.2.0核心源码解读
owo_ovo的博客
09-12 3827
【React】React18.2.0核心源码解读
Functions are not valid as a React child. This may happen if you return a Component instead of ＜Com
kjprime的博客
03-10 1074
详情 这个问题我还以为是路由写错了，一直搞错了方向，原来就是语法错误。 解决方法 就是在大括号{}中的组件要写成带尖括号的。如：{Login} => {<Login />}
react报错Functions are not valid as a React child. This may happen if you return a Component instead o
liguoyuan819的博客
04-19 4839
react报错 Functions are not valid as a React child. This may happen if you return a Component instead of <Component> react渲染路由组件时，循环遍历使用route展示对应的组件，element里面写对应的组件时，如果直接用element={route.component}会报错，这时不会将route.component渲染成组件，而应该写成element={<route.c
React报错大坑之一：Warning: Functions are not valid as a React child. This may happen if you return a Co...
热门推荐
Easylee的博客
05-16 4万+
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 翻译： 方法（函数）作为一个React子组件是无效的。 出现这种情况可能是因为： ①你return..
Warning: Functions are not valid as a React child. This may happen if you return a Component instead
良人未归 ッ 佳人独醉 ッ
02-22 2208
初学者经常犯的错误,ReactDOM.render 渲染时,第一个参数应该为组件标签, 将 更改为: 完美解决
Functions are not valid as a React child. This may happen if you return a Component instead of ＜Comp
无简介！！
08-29 233
react路由模块问题
【React报错】Warning: Functions are not valid as a React child. This may happen if you return a Com...
uaena的博客
11-18 2761
Warning: Functions are not valid as a React child.....问题是调用某个方法时忘记加括号 （以上报错说的不好懂 反正问题就是没加括号） 解决办法：就是在方法名后面加上括号 （） eg. 如以上我想调用createFirstList这个方法时， 这里没加括号 以上纯属个人记录 ...
Or maybe you meant to call this function rather than return it.
baidu_41604826的博客
07-12 1039
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. 同事碰到如上的报错，后来我们讨论出了解决方法，记录如下...
react router v6 问题Functions are not valid as a React child.
qq_45042295的博客
10-31 481
react router v6遇到Warning:Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. at span
最新发布
09-17
在 React 中出现 “Functions are not valid as a React child” 错误，通常是因为在渲染时将函数直接作为子元素使用，而 React 期望的是具体的组件实例或者可渲染的值。以下是结合错误原因给出的解决方案： ### 1. 确保返回组件实例而非组件本身 如果在代码里返回了组件而不是组件实例，就会引发该错误。如下例： ```jsx // 错误示例 function MyComponent() { return <div>Hello, World!</div>; } function App() { return ( <span> {MyComponent} {/* 错误：返回的是组件，而不是组件实例 */} </span> ); } // 正确示例 function MyComponent() { return <div>Hello, World!</div>; } function App() { return ( <span> <MyComponent /> {/* 正确：返回组件实例 */} </span> ); } ``` ### 2. 调用函数而非返回函数 要是代码里返回了函数而没有调用它，也会出现此错误。如下例： ```jsx // 错误示例 function sayHello() { return "Hello, World!"; } function App() { return ( <span> {sayHello} {/* 错误：返回的是函数，而不是函数的返回值 */} </span> ); } // 正确示例 function sayHello() { return "Hello, World!"; } function App() { return ( <span> {sayHello()} {/* 正确：调用函数并返回其返回值 */} </span> ); } ``` ### 3. 检查错误位置（span 处） 要保证在 `span` 标签内没有直接使用函数作为子元素。检查 `span` 标签内的代码，确保使用的是组件实例或者可渲染的值。 ```jsx // 错误示例 function someFunction() { return () => <div>Inner content</div>; } function App() { return ( <span> {someFunction} {/* 错误 */} </span> ); } // 正确示例 function someFunction() { return <div>Inner content</div>; } function App() { return ( <span> {someFunction()} {/* 正确 */} </span> ); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿我格子衫来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值