javascript - 如何从 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>
     )
   }

}

想要导入 Context 的组件如下

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

标签： javascriptreactjs

Answer 1

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

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