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

Question

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

我使用 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 };

这允许您像这样使用您的提供者：

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

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

React Context and Storybook: Changing value of a React Context inside a component story

reactjs

storybook

react-context