带有React.createContext的打字稿HOC

时间:2019-02-28 04:42:56

标签: reactjs typescript firebase react-context

我有这个.js片段,需要翻译成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

我最好的猜测是

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'.

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

更好的做法是创建类型并将Partial用作默认值:

xls.tbl <- xls(tbl$x, order.by = tbl$t)