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

Question

我正在使用Context-Api，并试图在生命周期方法中使用从我的文件中提供的函数。当然，函数没有包装在使用者中，所以我查看了文档并设置了上下文的值。这仍然不是working.Everyting在我返回的类component中工作，但是component did挂载不起作用。

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);
  ...
};

​