如何從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 。