StoryBook React 钩子答案

【问题标题】：StoryBook React hookStoryBook React 钩子
【发布时间】：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()
};

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

【问题讨论】：

标签： css reactjs react-native storybook

【解决方案1】：

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

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

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

【讨论】：