Question

由于我是新来的反应者，我在寻找一种在我的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;

Answer 1

有了React 16.8，我们得到了一个叫做Hooks的东西。挂钩允许开发人员模仿功能组件内部的类组件功能。

其中一个钩子是useContext钩子，它使您可以将功能组件连接到上下文。

const value = React.useContext(MyContext);

来自documentation：

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

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

Answer 2

  // first define your context
  const MyContext = React.createContext();

  // wrap your component that should use the context
  <MyContext.Provider value={yourValue}>
    <YourComponent />
  </MyContext.Provider>

  // then inside YourComponent call useContext hook
  import {useContext} from React

  function YourComponent() {
    const contextValue = useContext(MyContext)
    return <div>{/* anything */}</div>
  }

请参考以下链接：https://reactjs.org/docs/context.html

Answer 3

对于功能组件，可以使用useContext。例如在消费者中

import React, { useContext } from 'react'
import { ProductContext } from 'my/path/to/context'
function MyComponent() {
  const {light, dark} = useContext(ProductContext)
  return <div>hello</div>
}

从我的观点来看，我将创建一个自定义钩子作为useContext（ProductContext）并将其放入createContext（）的同一文件中。即

import React,{ createContext, Component, useContext } 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;

// custom hooks
export const useProduct = () => useContext(ProductContext)

上下文API反应功能组件

3 个答案: