原文链接: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."错误,通常是因为以下两个原因:
- 从
render
中返回一个函数引用而不是一个组件。 - 使用 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>;
};
//