小编fre*_*ben的帖子

我想知道如何更改Storybook 中组件故事内的React Context的值。我想有一种方法可以通过故事控制来控制它，但没有任何文档。

我使用Storybook 文档的这一部分为我的故事提供两个单独的上下文。

我的代码.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 中的值。

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