带有 React.createContext 的 Typescript HOC

Posted 2023-03-13

【中文标题】带有 React.createContext 的 Typescript HOC

【英文标题】：Typescript HOC with React.createContext

【发布时间】：2019-07-21 22:41:20

【问题描述】：

我有这个需要翻译成 Typescript 的 .js sn-p。

import React from 'react';

const FirebaseContext = React.createContext(null)

export const withFirebase = Component => props => (
    <FirebaseContext.Consumer>
        firebase => <Component ...props firebase=firebase />
    </FirebaseContext.Consumer>
)

export default FirebaseContext

我最好的猜测是

const FirebaseContext = React.createContext(null)

export const withFirebase = (Component: React.ComponentClass) => (props: any) => (
    <FirebaseContext.Consumer>
        firebase => <Component ...props firebase=firebase />
    </FirebaseContext.Consumer>
)

但是当我尝试使用上下文时——通过传递new Firebase():

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import * as serviceWorker from './serviceWorker';

import App from './components/App';
import Firebase,  FirebaseContext  from './components/Firebase';

ReactDOM.render(
    <FirebaseContext.Provider value=new Firebase()>
        <App />
    </FirebaseContext.Provider>,
    document.getElementById('root'),
);

serviceWorker.unregister()

在这种情况下——我得到Type 'Firebase' is not assignable to type 'null'.

【参考方案1】：

您似乎没有为createContext 指定任何类型。向其添加 Firebase 类型应该可以工作

const FirebaseContext = React.createContext<Firebase | null>(null);

【参考方案2】：

更好的是创建类型并使用 Partial 作为默认值：

type FirebaseContextProps = 
  firebase: Firebase
  isOk: boolean
  data: string


const FirebaseContext= React.createContext<Partial<FirebaseContextProps>>()

<FirebaseContext.Provider value= firebase, isOk, data >