如何通过Context API在React.Component类中获取数据？

Question

我如何使用Context API来获取来自另一个组件的数据，并且接受数据的组件应该是一个React.Component（不在功能组件中）。

我想获取驻留在上下文中的数据。提供程序作为组件。我用谷歌搜索了如何使用React Context API，所有的答案都基于使用功能组件，而不是React。零件。

由于我不知道如何使用Context API从其他组件中获取数据，因此我尝试了PubSub-JS，但现在我想使用Context API。

我有一个使用Context API的组件，我想从下面的组件中获取数据。

import React, {Component} from "react";
import axios from "axios";

const VideoInformationContext = React.createContext();

class VideoContext extends Component{

    constructor(props){
        super(props);
        this.state = {
            videoIdx: props.videoIdx
            videoList:null,
            theme:null
        }
    }

    componentDidMount(){
        this.loadResource();
    }

    loadResource(){
        axios({
            url:`<TEST SERVER>?videoIdx=${this.state.videoIdx}`,
            method:"get"
        }).then(response => {
            this.setState({
                videoList:response.data.videosAndTheme.videoList,
                theme:response.data.videosAndTheme.theme
            });
        });
    }

    render(){
        return (
            <VideoInformationContext.Provider value={this.state}>
                {this.props.children}
            </VideoInformationContext.Provider>
        );
    }
}

export const VideoinformationConsumer = VideoInformationContext.Consumer;
export default VideoContext;

所以我的问题是我想ComponentDidMount()在React 中的方法中获取数据。从上述组件中获取组件。

Answer 1

在使用者组件中，您可以使用设置上下文，static contextType = MyContext; 以便您的提供程序组件看起来类似于以下内容：

import React, {Component} from "react";
import axios from "axios";

export const VideoInformationContext = React.createContext();

class VideoContext extends Component{

    constructor(props){
        super(props);
        this.state = {
            videoIdx: props.videoIdx
            videoList:null,
            theme:null
        }
    }

    componentDidMount(){
        this.loadResource();
    }

    loadResource(){
        axios({
            url:`<TEST SERVER>?videoIdx=${this.state.videoIdx}`,
            method:"get"
        }).then(response => {
            this.setState({
                videoList:response.data.videosAndTheme.videoList,
                theme:response.data.videosAndTheme.theme
            });
        });
    }

    render(){
        return (
            <VideoInformationContext.Provider value={this.state}>
                {this.props.children}
            </VideoInformationContext.Provider>
        );
    }
}

export default VideoContext;

您的使用者组件将类似于以下内容：

import React, { Component } from 'react';
import { VideoInformationContext } from '--the location of your provider component--';

class MyConsumerComponent extends Component {
  static contextType = VideoInformationContext;

  componentDidMount(){
    // you can use it here like this
    const videoList = this.context.videoList;
  }
  render() {
    //or you can use it here like this
    return <p>{this.context.videoIdx}</p>;
  }
}

export default MyConsumerComponent;

因此，在提供程序组件中，像上面一样导出创建的上下文，然后在使用者组件中，从设置上下文的任何位置导入上下文，然后在类中设置静态contextType，然后可以在组件中的任何位置以及用渲染this.context。