Javascript 无法使用react上下文在不同组件之间共享数据
分别创建了两个组件,如类(ABC)和函数(XYZ)。它们都是独立的组件。 在ABC组件中加载表数据,并尝试使用上下文将其传递给XYZ组件。 我不知道到底是哪里出的错。请参阅代码 内部ABC.jsJavascript 无法使用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
//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组件的子组件吗?不,两者都是独立组件