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

Question

我想知道如何在 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 中的值。

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

Answer 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>
  ),
];