Question

我正在使用Context-Api，并试图在生命周期方法中使用文件中提供的功能。该函数当然没有包装在使用者中，所以我查看了文档并将其值设置为上下文。这仍然无法正常工作。一切都在我返回类组件的过程中起作用，但是组件确实挂载了。

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

尝试使用上下文提供程序文件中的功能

1 个答案: