正文从这开始~

总览

产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误,通常是因为以下两个原因:

  1. render中返回一个函数引用而不是一个组件。
  2. 使用 react router 路由作为<Route path="/about" element={About} /> ,而不是<Route path="/about" element={<About />} />

这里有个例子来展示错误是如何发生的。

// App.js
/**
* ️ 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.
*/
const App = () => {
const getButton = () => {
return <button>Click</button>;
}; // ️ returning function not JSX element from render
return <div>{getButton}</div>;
}; export default App;

上面代码片段的问题在于,我们从render方法中返回getButton函数,而不是返回真正的JSX元素。

调用函数

为了解决这种情况下的错误,我们可以调用该函数。

const App = () => {
const getButton = () => {
return <button>Click</button>;
}; // now returning the actual button
// added parenthesis () to call the function
return <div>{getButton()}</div>;
}; export default App;

通过调用getButton函数,我们返回了button元素从而解决了该错误。

如果你正在尝试渲染一个真正的组件,确保将其用作<Component />而不是Component

const App = () => {
const Button = () => {
return <button>Click</button>;
}; // Using component as <Button />, not Button
return (
<div>
<Button />
</div>
);
}; export default App;

另一个导致该错误的原因是,当我们为react router 路由传递一个元素时,比如<Route path="/about" element={About} />

// ️ wrong syntax
<Route path="/about" element={About} /> // right syntax
<Route path="/about" element={<About />} />

在 react router v6 中,我们不向 Route 组件传递 children 属性,而是使用 element 属性。例如,<Route path="/about" element={<About />} />

当使用react router时,请确保将应该为特定路由渲染的组件作为<Component />,而不是Component

总结

可以通过以下两种方式解决错误:

  1. render中返回组件而不是函数。
  2. 传递给路由中element属性的是<Component />,而不是Component

React报错之Functions are not valid as a React child的更多相关文章

  1. React报错之Objects are not valid as a React child

    正文从这开始~ 总览 当我们尝试在JSX代码中,直接渲染对象或者数组时,会产生"Objects are not valid as a React child"错误.为了解决该错误, ...

  2. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. DRDB报错------0: Failure: (119) No valid meta-data signature found.

    一. 错误 drbdadm create-md datadrbdadm up data  <--启动时报错 [root@data-- ~]# drbdadm up data : Failure: ...

  5. MYSQL安装报错 -- 出现Failed to find valid data directory.

    运行环境:windows10数据库版本:mysql.8.0.12安装方式:rpm包直接安装 问题描述:mysql初始化的时候找不到对应的数据库存储目录 报错代码: 2018-10-13T03:29:2 ...

  6. 不修改系统日期和时间格式,解决Delphi报错提示 '****-**-**'is not a valid date and time

    假如操作系统的日期格式不是yyyy-MM-dd格式,而是用strtodate('2014-10-01')) 来转换的话,程序会提示爆粗 '****-**-**'is not a valid date ...

  7. azure iothub create-device-identity样例报错: unable to find valid certification path ,及iothub-explorer Error: CERT_UNTRUSTED

    https://docs.microsoft.com/zh-cn/azure/iot-hub/iot-hub-java-java-getstarted 在IDEA中执行上述的代码,会出现下面的报错信息 ...

  8. React报错 :browserHistory doesn't exist in react-router

    由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...

  9. Linux安装Apache报错:Cannot find a valid baseurl for repo: base/7/x86_64解决方案

    最近使用CentOS7学习,安装安装Apache时候,使用yum安装Apache报错:本文适合CentOS7和RHEL7 # yum install httpd 出现:cannot find a va ...

随机推荐

  1. 1. 时序练习(广告渠道vs销量预测)

    用散点图来看下sales销量与哪一维度更相关. 和目标销量的关系的话,那么这就是多元线性回归问题了. 上面把所有的200个数据集都用来训练了,现在把数据集拆分一下,分成训练集合测试集,再进行训练. 可 ...

  2. 总结 到 GDOI 2021 这个阶段

    截止本蒟蒻第一次体验省选(虽然是普及组) 本蒟蒻已经有了许多收获,却也有很多不足 优点 对一些学过的知识掌握还行 没了 缺点 会却做不出来 有一些题不难,却想不到正解 如 Day2 T1 ,就是移一下 ...

  3. [pwn基础]Pwntools学习

    目录 [pwn基础]Pwntools学习 Pwntools介绍 Pwntools安装 Pwntools常用模块和函数 pwnlib.tubes模块学习 tubes.process pwnlib.con ...

  4. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  5. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  6. Spring jdbctemplate和事务管理器 全注解配置 不使用xml

    /** * spring的配置类,相当于bean.xml */@Configuration//@Configuration标注在类上,相当于把该类作为spring的xml配置文件中的<beans ...

  7. UiPath官方视频Level1

    [UiPath官方视频Level1]第一课-UiPath简介https://www.bilibili.com/video/BV1zJ41187vB [UiPath官方视频Level1]第二课-变量和数 ...

  8. Kolla部署Pike版本的OpenStack-allinone云平台

    1 openstack 概述 openstack概述 : OpenStack是一个NASA美国国家航空航天局和Rackspace合作研发 的,以Apache许可证授权,并且是一个自由软件和开放源代码项 ...

  9. 【python基础】第10回 周总结

    路径 可以简单的理解为路径就是某个事物所在的具体位置(坐标) 1.相对路径:必须有一个参考系,就是相对于自己的目标文件的位置. 2.绝对路劲:不需要有参考系,是指文件在硬盘上真正存在的路径. 计算机五 ...

  10. bat-设置oracle服务

    1.停止oracle所有服务 并将服务设置为手动启动 @echo off echo oracle服务--------停止 net stop OracleVssWriterORCL net stop O ...