Question

我已经使用create react app创建了一个react typescript应用程序。现在，我想要一个可以在所有组件之间访问的上下文：

export const UserContext = React.createContext<{name: string}>({name: 'Foo'});

上下文链接到主要应用程序组件的状态。这种状态的确发生了变化，因此对于组件而言，上下文的值也应发生变化。

<UserContext.Provider value={this.state}>
    <MainPage/>
</UserContext.Provider>

我遵循了文档字符串建议，以了解如何在组件中的上下文中进行设置，

class MainPage extends React.Component {
   static contextType = UserContext;
   context!: React.ContextType<typeof UserContext>;

   public render() {
       return <div>{this.context.name}</div>
   }
}

但是this.context.name始终为null。我在 app组件中放置了一个div，其值链接到this.state，并且确实显示了与上下文不同的值。当我用原始的react / create-react-app编写代码时，我在努力工作，而我在@types/react中的相同组件下工作？

有人知道如何在Typescript的组件类内部实现上下文吗？

Answer 1

好像您的UserContext的type参数有点错误。您需要删除typeof。

所以React.createContext<{ name: string }>而不是React.createContext<typeof { name: string }>

这对我有用：

import * as React from 'react';

const UserContext = React.createContext<{ name: string }>({ name: 'test' });

export class MainPage extends React.Component<undefined, undefined> {
  static contextType = UserContext;
  context!: React.ContextType<typeof UserContext>;

  public render() {
    return <div>{this.context.name}</div>;
  }
}

React Typescript-react组件类中的上下文

1 个答案: