Storybook中如何为组件注入全局Context Provider？

a'ゞ志诚提问于 2026-02-19 13:51:26 阅读 2

框架

我在用Storybook写一个按钮组件的Story时，发现组件依赖项目里的AuthContext，但Storybook运行时报错找不到Context值。我试过在.stories.jsx里用addDecorator包裹，但控制台还是报同样的错，应该怎么正确注入全局Provider呢？

我尝试在预览面板配置了这样的装饰器：


import { AuthProvider } from '../context/AuthContext';

addDecorator(
  withParameters({
    decorators: [(story) => <AuthProvider><story /></AuthProvider>]
  })
);

但控制台依然显示：


Warning: Failed Context Consumption
Cannot read properties of undefined (reading 'user')

难道Storybook的Provider注入方式和常规React应用不同？有没有更好的实现方法？

React生态组件设计

我来解答赞 2 收藏

反馈

1 条解答

Designer°景景 Lv1

问题在于你的装饰器写法有问题，withParameters不是用来包裹组件的，应该直接用addDecorator。试试这样写：

import React from 'react';

import { addDecorator } from '@storybook/react';

import { AuthProvider } from '../context/AuthContext';



addDecorator((story) => <AuthProvider>{story()}</AuthProvider>);

如果还是不行，检查下AuthContext里是否正确初始化了默认值，Storybook环境需要明确的defaultValue，不然会报undefined。改下你的context创建代码：

const defaultAuthValue = {

  user: null,

  login: () => {},

  logout: () => {}

};



export const AuthContext = React.createContext(defaultAuthValue);

2026-02-19 14:04