使用 Gatsby wrapRootElement TypeScript 时获取“对象作为 React 子项无效”答案

【问题标题】：Getting "Objects are not valid as a React child" when using Gatsby wrapRootElement TypeScript使用 Gatsby wrapRootElement TypeScript 时获取“对象作为 React 子项无效”
【发布时间】：2022-01-03 08:50:57
【问题描述】：

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

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

gatsby-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

【问题讨论】：

尽管是拼写错误，但这是一个非常常见的拼写错误，几乎肯定会对未来的观众有所帮助，因此不应关闭。

标签： javascript reactjs typescript gatsby

【解决方案1】：

看起来像一个简单的错字：您没有从道具中解构children，而是将第一个参数（道具）命名为children。

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

【讨论】：