如何在故事书中注入窗口变量?

Ant*_*ong 5 reactjs redux storybook

我想在故事书中添加一个React组件(称为ApplicationForm)。

故事书是这样写的:

import { configureStore } from '../store';

const store = configureStore();

storiesOf('application from', module)
  .addDecorator(story => <Provider store={store}>{story()} </Provider>)
  .add('all', () => (
      <ApplicationForm />
  ));
Run Code Online (Sandbox Code Playgroud)

ApplicationForm与reduxForm创建。这就是为什么我需要storeaddDecorator函数中提供一个原因。

不幸的是,在configureStore功能上,化约器之一具有全局数据的依赖性window.GLOBAL

在故事书中,我将看到以下错误:

GLOBAL is not defined
ReferenceError: GLOBAL is not defined
    at initGlobalState (http://localhost:9010/static/preview.bundle.js:86625:3)
Run Code Online (Sandbox Code Playgroud)

如何在故事书中注入或模拟此类全局数据?

Ant*_*ong 7

我可以preview-head.html__stories__目录中添加文件。

我里面有这样的javascript:

<script>
  var data = { };
  window.GLOBAL = {
    data: data
  };  
 </script>
Run Code Online (Sandbox Code Playgroud)

文献资料

  • 如果我只想将其用于特定故事而不是全部用于故事,这将如何工作? (3认同)
  • 您需要将此文件放在`.storybook` 顶级(config)目录中,并且在更改后**重新启动**storybook 的服务器很重要! (2认同)

Ang*_*cas 6

您尝试window访问的是 iframe 预览。尝试从 iframe、 Storybook 外部访问该窗口window

window.parent.window.GLOBAL