reactjs - Typescript HOC med React.createContext

Jag har detta .js-utdrag som jag behöver översätta till Typescript.

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

mitt bästa gissning

const FirebaseContext = React.createContext(null)

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

men när jag försöker använda kontexten - genom att skicka en 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()

i det här fallet - jag får Typ 'Firebase' kan inte tilldelas typ 'null'.

Svar #1

Det verkar som att du inte har specificerat någon typ till createContext. Att lägga till en Firebase-typ till det bör fungera

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

Svar #2

Ännu bättre är att skapa en typ och använda Partial för standardvärden:

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

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

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

Relaterade artiklar