时间戳

首页 > 解决方案 > 上下文 API 反应功能组件

javascript - 上下文 API 反应功能组件

问题描述

由于我是 react 新手，我一直在寻找在我的 react 应用程序中使用上下文 api 的方法，但找不到在功能组件中使用上下文 api 的方法，他们中的大多数人在类组件中使用它。对不起我的问题...

//这是我的上下文

    import React,{ createContext, Component } from 'react';
    export const ProductContext = createContext();
    class ProductContextProvider extends Component {
    state = {
        light: 'a',
        dark: 'b'
    }
    render() {
        return(
            <ProductContext.Provider value={{...this.state}}>
                {this.props.children}
            </ProductContext.Provider>
        );
    }
}

export default ProductContextProvider;

标签： javascriptreactjs

解决方案

使用 React 16.8，我们得到了一个叫做 Hooks 的东西。钩子允许开发人员在功能组件中模仿类组件的功能。

这些钩子之一是useContext允许您将功能组件连接到上下文的钩子。

const value = React.useContext(MyContext);

从文档中：

接受一个上下文对象（从 中返回的值React.createContext）并返回该上下文的当前上下文值。当前上下文值由<MyContext.Provider>树中调用组件上方最近的值 prop 确定。

当最近<MyContext.Provider>的组件更新时，此 Hook 将触发重新渲染，并将最新的上下文值传递给该 MyContext 提供程序。

推荐阅读