带tsx的useContext

Question

我正在使用useContext钩子和tsx。

const StoreContext = createContext({});

export function useStore() {
   const [store] = useContext(StoreContext);
   return store;
}

export function useDispatch() {
    const [, dispatch] = useContext(StoreContext);
    return dispatch;
}

对于[store]和[dispatch]，我都得到了相同的错误。

类型“{}”不是数组类型

知道怎么解决这个问题吗？

Answer 1

通过为TypeScript提供一个类型参数告诉createContext上下文的类型。

考虑一下这个例子：

interface Theme {
  mode: 'light' | 'dark'
}

Thame是我们上下文的形状。这个接口需要转到createContext

const StoreContext = React.createContext<Theme>({ mode: 'dark' });

const { mode } = React.useContext(StoreContext);

(mode === 'dark') || (mode === 'light') // true

您的上下文不必是一个对象。在本例中，上下文由一个数字数组组成。

const StoreContext = React.createContext<number[]>([0]);

const [first, ...rest] = React.useContext(StoreContext);

(typeof first === 'number') // true

Answer 2

我试着使用useContext，但是没有用。我看到了将ReactDOM和ReactDOM降级为16.7.0-alpha-2的建议，但这也不起作用。我的问题的解决方案是将组件封装在myContext.Consumer中。对于基于类的组件，可以使用yourClass.contextType = yourContext，然后可以使用"this.context“访问特性。请参阅以下文档：https://reactjs.org/docs/context.html