类型“{ children: Element; }”与类型“IntrinsicAttributes”不具有相同的属性

Question

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AppStateProvider } from './AppState'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <AppStateProvider> // 这里报错   类型“{ children: Element; }”与类型“IntrinsicAttributes”不具有相同的属性
      <App />
    </AppStateProvider>
  </React.StrictMode>
);

reportWebVitals();



import React, {useState} from 'react'

interface AppStateValue {
  username: string,
  shoppingCart: {
    item: {id: number, name: string}[]
  }
}

const defaultContextCalue: AppStateValue = {
  username: '机器人',
  shoppingCart: {item: []}
}
export const appContext = React.createContext(defaultContextCalue)

export const AppStateProvider: React.FC = (props:any) => {
  const [state, setState] = useState(defaultContextCalue)
  return(
    <appContext.Provider value={state}>
      {props.children}
    </appContext.Provider>
  )
}

这里只是使用contextProvider组件的一个组件，react：18.2.0 ts：4.7.4

Answer 1

React 18 版本开始，移除了React.FC类型中的children属性, 看 PR#56210，以及这篇文章 Removal of implicit children

可以改用React.PropsWithChildren类型

export const AppStateProvider = (props: React.PropsWithChildren) => {
  const [state, setState] = useState(defaultContextCalue);
  return (
    <appContext.Provider value={state}>{props.children}</appContext.Provider>
  );
};

stackblitz