解决React报错Functions are not valid as a React child
作者:Borislav Hadzhiev
总览
产生"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的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:
- 解决React报错No duplicate props allowed
- 解决React报错`value` prop on `input` should not be null
- react component changing uncontrolled input报错解决
- 解决React报错useNavigate() may be used only in context of Router
- 解决React报错Style prop value must be an object
- 解决React报错The tag is unrecognized in this browser
- 解决React报错Cannot assign to 'current' because it is a read-only property
- Objects are not valid as a React child报错解决