0

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>
)
4

1 に答える 1

1

コンポーネントをコンシューマーでラップして関数をプロップとして渡すか、(より良い-)useContextフックを使用してコンテキストから値を取得して、コンポーネントを機能コンポーネントに変換することができます。

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

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

于 2019-07-15T20:33:26.327 に答える