如何解决通过 Storybook 使用 React 的 useContext
我正在尝试通过故事书访问 contextAPI 中的数据,但我无法管理它。 请记住,原始页面没有任何问题,上下文工作正常。
反应版本:17.0.2 故事书版本:6.2.7 这是 devDep:
"devDependencies": {
"@storybook/addon-actions": "^6.2.7","@storybook/addon-essentials": "^6.2.7","@storybook/addon-links": "^6.2.7","@storybook/node-logger": "^6.2.7","@storybook/preset-create-react-app": "^3.1.7","@storybook/react": "^6.2.7","eslint-config-react-app": "^6.0.0","eslint-plugin-prettier": "^3.3.1","eslint-plugin-react": "^7.23.1","eslint-plugin-react-hooks": "^4.2.0","node-sass": "^5.0.0","prettier": "^2.2.1","sass": "^1.32.8"
}
我在 Storybook 的 preview.js 文件中为包装器添加了一个装饰器。
addDecorator((storyFn) => <GlobalStore>{storyFn()}</GlobalStore>);
然后,在 X.stories.js 中,我尝试像往常一样调用 useContext:
import { GlobalContext } ...
import { useContext } ...
export const SampleStory = () => {
const { Variable } = useContext(GlobalContext);
但我在故事中遇到了这个错误:
Cannot read property 'Variable' of undefined
作为解决方案,我创建了一个新组件作为新的/分离的文件,并通过 X.stories.js 导入它。此解决方案有效,但以这种方式,我必须创建大量无用的不必要文件。
提前致谢,干杯,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。