StoryBook React 钩子

Posted 2023-02-19

【中文标题】StoryBook React 钩子

【英文标题】：StoryBook React hook

【发布时间】：2021-03-08 18:38:08

【问题描述】：

所以我在我的代码中使用了 useLocation 钩子，而我是故事书的新手，我想不出在我的代码中初始化该钩子的方法：

let location = useLocation();

const parsedLocation = new URLSearchParams(location.search)
const query = parsedLocation.get('query')
const articles, status = useSearch(query, 50)

故事书中

const Template = (args) => <Page ...args />;

export const Primary = Template.bind();
 Primary.args = 
   location: useLocation()
;

// 它向我显示无法读取未定义的属性“位置”的错误

【参考方案1】：

将useLocation(); 移动到您收集所有数据和处理事件的容器组件。将 query 作为 props 传递给子组件。

在 Storybook 中使用模拟数据来构建这个组件。 Storybook 更多的是用于开发组件的 UI 部分。要使用 useLocation() 钩子进行测试，您可以使用单元测试。

如果您需要为组件模拟一些 URL 位置，请考虑使用 MemoryRouter https://reactrouter.com/web/api/MemoryRouter