【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
from render."错误,通常是因为以下两个原因:
- 从
render
中返回一个函数引用而不是一个组件。 - 使用 react router 路由作为
,而不是
。
文章图片
这里有个例子来展示错误是如何发生的。
// App.js
/**
* ?? 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.
*/
const App = () => {
const getButton = () => {
return ;
};
// ? returning function not JSX element from render
return {getButton};
};
export default App;
上面代码片段的问题在于,我们从
render
方法中返回getButton
函数,而不是返回真正的JSX元素。调用函数 为了解决这种情况下的错误,我们可以调用该函数。
const App = () => {
const getButton = () => {
return ;
};
// ? now returning the actual button
// added parenthesis () to call the function
return {getButton()};
};
export default App;
通过调用
getButton
函数,我们返回了button
元素从而解决了该错误。如果你正在尝试渲染一个真正的组件,确保将其用作
而不是Component
。const App = () => {
const Button = () => {
return ;
};
// ? Using component as , not Button
return ();
};
export default App;
。// ?? wrong syntax
// ? right syntax
在 react router v6 中,我们不向 Route 组件传递
children
属性,而是使用 element
属性。例如,
。当使用react router时,请确保将应该为特定路由渲染的组件作为
,而不是Component
。总结 可以通过以下两种方式解决错误:
- 从
render
中返回组件而不是函数。 - 传递给路由中
element
属性的是
,而不是Component
。
推荐阅读
- react.js|React批处理原理及性能优化实践
- 学习|JSX基本使用
- React|React 错误边界之 react-error-boundary
- React报错之Cannot assign to 'current'
- React报错之The tag is unrecognized in this browser
- react|react native常用插件
- react.js|React(9)—— Hooks - LazyLoad - Context - 组件优化 - 错误边界 - 组件通信方式总结
- 前端|Next.js 与 React 之间的比较
- react|react-router-dom v6 使用