reactjs - 尝试使用我的上下文提供程序文件中的函数

Question

我正在使用 Context-Api 并尝试在生命周期方法中使用我的文件提供的函数。该函数当然没有包含在消费者中，所以我查看了文档并将值设置为上下文。这仍然不工作。Everyting 在我返回我的类组件时工作，但组件确实挂载不起作用。

import { ProductConsumer } from '../context';

export default class Details1 extends Component
componentDidMount() {
    let value = this.context;
    let id = this.props.match.params.id;
    value.handleDetail(id);
  }

render() {
{value => {
          const {
            id,...} = value.detailProduct;
    return (
      <ProductConsumer>
        {value => {
My Component
 </ProductConsumer>

 export const Details = () => (
  <Product.Consumer>
    {context =>
      <Details1 context={context}/>

    }
  </Product.Consumer>
)

Answer 1

您可以将组件与使用者一起包装，将函数作为道具传递给它，或者（更好 - ）将您的组件转换为功能组件，使用useContext钩子从您的上下文中获取值。

import React, { useContext } from "react"; 
import someContext from "./context-path";

const MyComponent = () => {
  const { myFunction } = useContext(someContext);
  ...
};