使用 Gatsby wrapRootElement TypeScript 时获取 "Objects are not valid as a React child"

Question

我正在尝试使用 wrapRootElement 浏览器在 Gatsby 中实现主题提供程序 API。我一直在网上看例子，找不到我哪里出错了。我收到错误消息“对象作为 React 子项无效（已找到：具有键 {children} 的对象）”。

这是我第一次使用 Gatsby 浏览器 API，我知道问题出在我试图传递的子元素上，元素是一个对象，但是查看所有我可以在网上找到的示例，它们的实现方式相同。

盖茨比-browser.js

import React from "react"

import ThemeWrapper from './src/components/theme/theme'

export function wrapRootElement({ element }) {
    return <ThemeWrapper>{element}</ThemeWrapper>
}

theme.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

Answer 1

看起来像一个简单的错字：你没有从你的道具中解构 children，你正在命名第一个参数（道具）children。

- const ThemeWrapper = (children: React.ReactNode) => {
+ const ThemeWrapper = ({ children: React.ReactNode }) => {

使用 Gatsby wrapRootElement TypeScript 时获取 "Objects are not valid as a React child"

Getting "Objects are not valid as a React child" when using Gatsby wrapRootElement TypeScript

javascript

typescript

reactjs

gatsby