我已经构建了一个 ReactJS 组件库,用于使用 sim 链接通过 NPM 包安装的多个项目。我想使用上下文 API 将数据从组件库提供的父组件传递到我的基础项目,以供多个消费者组件使用,这些组件也从组件库提供服务。当我尝试时,我的子组件中的上下文始终未定义。
如果我将我的消费者组件放在我的库中的提供者组件中,它就像一个冠军,但这会挫败我想要实现的目标。如果我将提供者和消费者都导出到我的基础项目,消费者将看不到提供者。
这是来自我的基础项目
import { Screen, COD, GenericSocketServer } from 'component-library'
export default class View extends React.PureComponent {
render() {
return (
<Screen className="screen odmb1">
<GenericSocketServer>
<COD />
</GenericSocketServer>
</Screen>
)
}
}
这是从我的“组件库”导出的提供程序代码
import React from 'react';
import MyContext from "./context";
import COD from './../cod';
export default class GenericSocketServer extends React.Component {
render() {
return (
<MyContext.Provider value={{ foo: 'bar' }}>
<COD />
{this.props.children}
</MyContext.Provider>
);
}
}
这是我在“组件库”中使用的内容代码
import React from 'react'
const MyContext = React.createContext()
export default MyContext
这是我从“组件库”导出的消费者组件
import MyContext from "../GenericSocketServer/context"
class COD extends React.Component {
render() {
return (
<React.Fragment>
<MyContext.Consumer>
{(context) => {
/*
context comes back undefined
I expect { foo: 'bar' }
*/
console.log('context :', context)
return (
<p>This should work</p>
)}}
</MyContext.Consumer>
</React.Fragment>
)
}
}
上下文总是返回未定义,就好像它没有看到父提供者一样。我想我自己在初始化上下文时做错了,或者由于某种原因,我正在导入的两个组件不共享相同的上下文。请帮忙!!不知道我是否应该放弃这个而只使用 redux。