React报错之Functions are not valid as a React child

2022-08-19 16:43:31 浏览数 (1)

原文链接:https://bobbyhadz.com/blog/react-functions-are-not-valid-as-react-child[1]

作者:Borislav Hadzhiev[2]

正文从这开始~

总览

产生"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 />} />

functions-are-not-valid-as-react-child.png

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

代码语言:javascript复制
// 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>;
  };

  // 


	

0 人点赞