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

Question

如何使用 Context API 从另一个组件获取数据，并且接受数据的组件应该是React.Component （ React.Component函数组件中）。

我想获取驻留在 Context 中的数据。 提供者作为一个组件。 我在 google 上搜索了如何使用 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;

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

Answer 1

在消费者组件中，您可以使用static contextType = MyContext;设置上下文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渲染。