React Context 和 Storybook：在组件故事中更改 React Context 的值

Posted 2023-02-19

【中文标题】React Context 和 Storybook：在组件故事中更改 React Context 的值

【英文标题】：React Context and Storybook: Changing value of a React Context inside a component story

【发布时间】：2021-09-27 04:03:45

【问题描述】：

我想知道如何在 Storybook 的组件故事中更改 React 上下文 (https://reactjs.org/docs/context.html) 的值。 我想有一种方法可以通过故事控件来控制它，但没有任何文档。

我使用 Storybook 文档的这一部分为我的故事提供了两个单独的上下文：https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking

我在.storybook/preview.js 中的代码如下所示：

export const decorators = [
  (Story) => (
    <FilterProvider>
      <SearchQueryProvider>
        <Story />
      </SearchQueryProvider>
    </FilterProvider>
  ),
];

FilterProvider 和 SearchQueryProvider 代码如下所示：

const SearchQueryProvider = ( children : SearchQueryProviderProps) => 
  const [searchQuery, setSearchQuery] = useState<string>("");

  return (
    <SearchQueryContext.Provider value=[searchQuery, setSearchQuery]>
      children
    </SearchQueryContext.Provider>
  );
;

export  SearchQueryProvider, useSearchQuery ;

这些状态的初始值基本都是空的。 为了测试和预览使用这些上下文的组件，我现在想更改 Storybook 中的值。

如果有人知道我如何实现这一点：我很高兴知道并感谢您分享您的知识:)

【参考方案1】：

您可以添加initialValue作为属性并设置searchQuery状态的初始值并使用""作为默认值：

const SearchQueryProvider = ( children, initialValue = "" : SearchQueryProviderProps) => 
  const [searchQuery, setSearchQuery] = useState<string>(initialValue);

  return (
    <SearchQueryContext.Provider value=[searchQuery, setSearchQuery]>
      children
    </SearchQueryContext.Provider>
  );
;

export  SearchQueryProvider, useSearchQuery ;

这允许您像这样使用您的 Provider：

export const decorators = [
  (Story) => (
    <FilterProvider>
      <SearchQueryProvider initialValue="something">
        <Story />
      </SearchQueryProvider>
    </FilterProvider>
  ),
];

【讨论】：

只要我可以设置值并在故事中显示，它就可以工作。但我无法在组件故事的“控制”面板中设置此值。

如果你设置了你的provider的初始值，我认为你不能在控制面板中改变它。但你可以这样做来控制值（对不起，格式搞砸了）：jsx const Template = ( searchQuery, ...args ) => ( <SearchQueryContext.Provider value=[searchQuery]> <SearchComponent ...args /> </SearchQueryProvider> ); export const WithProvider= Template.bind(); WithProvider.args = searchQuery: "", otherProperty: "with some value" ; 如果你使用控制面板，SearchComponent 将无法再更改值。