如何从Reactjs中的类组件导出上下文？

Question

我在从组件导出上下文时遇到问题。 包含上下文的组件如下。

import React, { Component, createContext} from 'react';


export const MyContext = React.createContext('');

export default class ComponentOne extends Component {
   ....
   ....
   render(){
     return(
     <MyContext.Provider value={'value1'}>
      <div>....</div>
     </MyContext.Provider>
     )
   }

}

下面要导入上下文的组件

import React, { Component}  from 'react'
import { MyContext } from "../ComponentOne/Index.js"

export default class ComponentTwo extends Component{
render(){
  console.log(this.props)
  return(
    <MyContext.Consumer>
    </MyContext.Consumer>
  )
}
}

我得到的错误是

TypeError: render is not a function

Answer 1

上下文提供者需要一个孩子。

 <MyContext.Provider value={'value1'}>
    <ComponentTwo />
  </MyContext.Provider>

Answer 2

该上下文可用于MyContext.Provider子级。

在您的情况下，您需要在提供程序中呈现ComponentTwo ，并作为使用者读取提供的value ：

import React from 'react';
import ReactDOM from 'react-dom';

export const MyContext = React.createContext('');

class ComponentTwo extends React.Component {
  render() {
    return (
      <MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>
    );
  }
}

class ComponentOne extends React.Component {
  render() {
    return (
      <MyContext.Provider value={'value1'}>
        <ComponentTwo />
      </MyContext.Provider>
    );
  }
}

ReactDOM.render(<ComponentOne />, document.getElementById('root'));

该错误可能是由于未读取Context.Consumer内部的值。

参考： 上下文API 。