reactjs - 如何在 Storybook 中使用 React 中的全局变量

标签 reactjs storybook

我找到了 this回答,但我无法用它解决问题。

我尝试在 Storybook 中加载的组件取决于通过 CDN 在 index.html 中注入(inject)的全局变量。

为了访问组件中的变量,我在文件顶部添加了这条注释

/*global <variable name>*/

它在 React 应用程序中运行良好,但 Storybook 抛出此错误:<variable name> is not defined .

我尝试在 stories.js 的顶部添加该评论文件和配置文件的顶部。 - 运气不好。

CDN 的 URL 在一个 env 文件中。从看this doc 我尝试在 HTML 文件中添加第二个脚本,其中包含一个以 STORYBOOK_ 为前缀的环境变量.那也没用。

关于我可以做些什么来克服这个问题有什么想法吗?

最佳答案

我通过添加自定义头部标签解决了这个问题:https://storybook.js.org/docs/configurations/add-custom-head-tags/#docs-content

然后在那里添加我的全局变量,例如:

// preview-head.html
<script>
var foo = bar
</script>

关于reactjs - 如何在 Storybook 中使用 React 中的全局变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60438130/

相关文章:

javascript - 控制台日志不记录

reactjs - 是否可以仅在 props 更改时运行 useEffect,而不在状态更改时运行?

vue.js - Storybook 不会在 Vue 项目的组件中加载 SVG

javascript - 尝试作为 Prop 传递时, react 状态变量意外未定义

reactjs - 如何添加到我在状态中创建的对象?

javascript - 如何根据 onChange 在 React 功能组件中重新渲染?

reactjs - React 故事书不会因更改而重新加载

reactjs - 获取类型字符串不可分配给 Storybook 中 TS 组件的类型字符串

reactjs - 安装 react-leaflet 版本 3 后,React Storybook 未运行