有没有办法解决这个问题，输入 '{children:Element; }' 与类型“IntrinsicAttributes”没有共同的属性。？

Question

我创建一个名为 ThemeContext 的文件：

import { createContext, useState } from "react";
import PropTypes from "prop-types";
import { DARK_THEME, LIGHT_THEME } from "../constants/themeConstants";

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

export const ThemeContext = createContext<ThemeContextType>({
  theme: LIGHT_THEME,
  toggleTheme: () => {}
});

export const ThemeProvider: React.FC<{}> = ({ children }: any) => {
  const [theme, setTheme] = useState<string>(
    window.localStorage.getItem("themeMode") || LIGHT_THEME
  );

  window.localStorage.setItem("themeMode", theme);

  const toggleTheme = () => {
    setTheme((prevTheme) =>
      prevTheme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME
    );
    window.localStorage.setItem("themeMode", theme);
  };

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
};

ThemeProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

这就是我使用主题提供程序的地方：

import "./App.scss";
import { ThemeProvider } from "./context/ThemeContext";

import Admin from "./routes/admin/Admin";
import Global from "./routes/global/Global";

function App() {
  return (
    <div className="App">
      <Global />
      
      <ThemeProvider>
        <Admin></Admin>
     
      </ThemeProvider>
        
     
    </div>
  );
}

export default App;

但是我收到了一个错误： 类型 '{ 子元素：元素； }' 与类型“IntrinsicAttributes”没有共同属性。ts(2559) （别名）模块 ThemeProvider （别名）const ThemeProvider：React.FC<{}> 导入主题提供者

我试图理解这个问题，但似乎 ThemeProvider 不接受它包装的任何元素。 我希望有人帮助我

Answer 1

您输入的

ThemeProvider

组件没有任何 props，但在包装组件时传递子 props。

any

类型与

{}

中传入的

React.FC<{}>

冲突。

使用

React.PropsWithChildren

类型。

示例：

import { PropsWithChildren } from 'react';

export const ThemeProvider = ({ children }: PropsWithChildren<{}>) => {
  ...
};