Javascript 无法使用react上下文在不同组件之间共享数据

Javascript 无法使用react上下文在不同组件之间共享数据,javascript,reactjs,react-context,react-component,Javascript,Reactjs,React Context,React Component,分别创建了两个组件,如类(ABC)和函数(XYZ)。它们都是独立的组件。 在ABC组件中加载表数据,并尝试使用上下文将其传递给XYZ组件。 我不知道到底是哪里出的错。请参阅代码 内部ABC.js //excluding imports export const MContext = React.createContext(); export default class ABC extends Component { . //inside componentDidMount(){} loading

分别创建了两个组件,如类(ABC)和函数(XYZ)。它们都是独立的组件。 在ABC组件中加载表数据,并尝试使用上下文将其传递给XYZ组件。 我不知道到底是哪里出的错。请参阅代码

内部ABC.js

//excluding imports
export const MContext = React.createContext();
export default class ABC extends Component {
. //inside componentDidMount(){} loading resultsArray
.
.
.
handleClick(){
        this.showGrid = true;
}
 render() {
        return (
            <div>
                <MContext.Provider value={{resultsArray}} >

                </MContext.Provider>
.
.
.
<div>
   <button  onClick = {this.handleClick}>Submit</button>
   { this.state.showGrid ? <XYZ/> : null }
 </div>
</div>
}
const rows = [];
export default function XYZ() {

    <div>
        <Mcontext.Consumer>
            {(context) => (
                rows = context.value
            )}
        </Mcontext.Consumer>
    </div>
.
.
.
}
//不包括导入
export const MContext=React.createContext();
导出默认类ABC扩展组件{
.//内部组件didmount(){}加载结果数组
.
.
.
handleClick(){
this.showGrid=true;
}
render(){
返回(
.
.
.
提交
{this.state.showGrid?:null}
}
和内部XYZ.js

//excluding imports
export const MContext = React.createContext();
export default class ABC extends Component {
. //inside componentDidMount(){} loading resultsArray
.
.
.
handleClick(){
        this.showGrid = true;
}
 render() {
        return (
            <div>
                <MContext.Provider value={{resultsArray}} >

                </MContext.Provider>
.
.
.
<div>
   <button  onClick = {this.handleClick}>Submit</button>
   { this.state.showGrid ? <XYZ/> : null }
 </div>
</div>
}
const rows = [];
export default function XYZ() {

    <div>
        <Mcontext.Consumer>
            {(context) => (
                rows = context.value
            )}
        </Mcontext.Consumer>
    </div>
.
.
.
}
const行=[];
导出默认函数XYZ(){
{(上下文)=>(
行=context.value
)}
.
.
.
}
但是在这里,我无法将resultsArray[]传输到行[],而是得到了一个异常:

应为赋值或函数调用,而不是看到表达式

在XYZ.js中,任何线索都将不胜感激


注意:
…位于react中的render()函数内部

上下文
api仅用于将数据从父组件传递到子组件。这主要是为了避免在树下传递多个级别的
道具

   <MContext.Provider value={value} >
            <Component/>
    </MContext.Provider>

您没有使用任何组件包装
上下文。提供程序
。因此,这不起作用

ABC组件是XYZ组件的子组件吗?不,两者都是独立组件