[英]Getting "Objects are not valid as a React child" when using Gatsby wrapRootElement TypeScript
I am trying to implement a theme provider in Gatsby using the wrapRootElement browser API.我正在尝试使用 wrapRootElement 浏览器 API 在 Gatsby 中实现主题提供程序。 I've been looking at examples online and can't find where I went wrong.
我一直在网上查看示例,但找不到我出错的地方。 I am getting an error "Objects are not valid as a React child (found: object with keys {children})."
我收到一个错误“对象作为 React 子级无效(找到:object 和键 {children})。”
This is the first time I'm using Gatsby browser API, I know the problem is with the children I'm trying to pass down, with the element being an object, but looking at all the examples I can find online they are implemented the same way.这是我第一次使用 Gatsby 浏览器 API,我知道问题出在我试图传下去的孩子身上,元素是 object,但是看看我可以在网上找到的所有示例,它们都实现了同样的方法。
gatsby-browser.js盖茨比浏览器.js
import React from "react"
import ThemeWrapper from './src/components/theme/theme'
export function wrapRootElement({ element }) {
return <ThemeWrapper>{element}</ThemeWrapper>
}
theme.tsx主题.tsx
import * as React from "react"
import { ThemeProvider } from "@material-ui/styles"
import { CssBaseline } from "@material-ui/core"
import ThemeContext from "./themecontext"
import { defaultTheme, darkTheme } from "./themedefinition"
const ThemeWrapper = (children: React.ReactNode) => {
const [isDarkTheme, setDarkTheme] = React.useState(false);
const toggleDark = () => {
setDarkTheme(!isDarkTheme);
}
React.useEffect(() => {
if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
setDarkTheme(true);
}
}, [])
return (
<ThemeContext.Provider value={{isDarkTheme, toggleDark}}>
<ThemeProvider theme={isDarkTheme ? darkTheme : defaultTheme}>
<CssBaseline />
{children}
</ThemeProvider>
</ThemeContext.Provider>
)
}
export default ThemeWrapper
Looks like a simple typo: you aren't destructuring children
from your props, you're naming the first argument (the props) children
.看起来像一个简单的错字:你没有从你的道具中解构
children
,你正在命名第一个参数(道具) children
。
- const ThemeWrapper = (children: React.ReactNode) => {
+ const ThemeWrapper = ({ children: React.ReactNode }) => {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.