解决React报错Functions are not valid as a React child

目录
  • 总览
  • 调用函数
  • 总结

总览

产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误

通常是因为以下两个原因：

  • 从render中返回一个函数引用而不是一个组件。
  • 使用 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。

总结

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

  • 从render中返回组件而不是函数。
  • 传递给路由中element属性的是<Component />，而不是Component。

原文链接：bobbyhadz.com/blog/react-…

以上就是解决React报错Functions are not valid as a React child的详细内容，更多关于React 报错Functions valid的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React Hook 'useEffect' is called in function报错解决

    目录 总览 声明组件 声明自定义钩子 总结 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use作为函数名的前缀.比如说,useCounter使其成为一个组件或一个自定义钩子. 这里有个示例用来展示错误是如何发生的. // App.j

  • React hook 'useState' is called conditionally报错解决

    目录 总览 顶层调用 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误.为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上. 这里有个例子用来展示错误是如何发生的. import React, {useState} from 'react'; export default function App() { const [count,

  • 解决React报错Unexpected default export of anonymous function

    目录 总览 命名 注释单行规则 总结 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了解决该错误,在导出函数之前,为函数赋予一个名称. 这里有个例子来展示警告是如何发生的. // Header.js // ️ default export for anonymous function // ️ Unexpected default export of anonymous

  • 解决React报错Expected an assignment or function call and instead saw an expression

    目录 正文 显式返回 隐式返回 返回对象 正文 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', 'b', 'c'].map(el

  • 解决React报错Encountered two children with the same key

    目录 总览 index 唯一标识 总览 当我们从map()方法返回的两个或两个以上的元素具有相同的key属性时,会产生"Encountered two children with the same key"错误.为了解决该错误,为每个元素的key属性提供独一无二的值,或者使用索引参数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ name property is not a unique identifier con

  • 解决React报错JSX element type does not have any construct or call signatures

    目录 总览 React.ElementType 传递JSX元素 更新类型包 总览 当我们试图将元素或react组件作为属性传递给另一个组件,但是属性的类型声明错误时,会产生"JSX element type does not have any construct or call signatures"错误.为了解决该错误,可以使用React.ElementType类型. 这里有个例子来展示错误是如何发生的. // App.tsx import React from 'react'; i

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

  • 解决React报错Expected `onClick` listener to be a function

    目录 总览 传递函数 传递参数 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function"报错.为了解决该报错,请确保只为元素的onClick属性传递函数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: Expected `onClick` listener to be a function /

  • 解决React报错Functions are not valid as a React child

    目录 总览 调用函数 总结 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误 通常是因为以下两个原因: 从render中返回一个函数引用而不是一个组件. 使用 react router 路由作为<Route path="/about" el

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • React报错之Object is possibly null的问题及解决方法

    React报错之Object is possibly null的问题及解决方法

    目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • React报错之Parameter event implicitly has an any type解决

    目录 引言 总览 设置类型 逃生舱any 确定类型 引言 原文链接:bobbyhadz.com/blog/react-… 作者:Borislav Hadzhiev 正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决该错误,显示地为event参数声明类型. 比如说,在input元素上,将处理change事件声明类型为React.ChangeEvent<H

  • 解决React报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

  • 解决React报错Style prop value must be an object

    目录 总览 映射 提取 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(reac

  • 解决React报错The tag is unrecognized in this browser

    目录 总览 确保标签存在 小写字母开头 总览 当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告.为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: The tag <p1> is unrecognized i

  • 解决React报错Cannot assign to 'current' because it is a read-only property

    目录 总览 正确的泛型 DOM元素 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEf

随机推荐