reactjs - React + Redux + Storybook:在编写故事书故事时如何使用连接的 React 路由器的 useParams?
问题描述
我有一个反应组件,它id
从路由中获取一个并使用它来加载一些数据并填充 redux 状态。
我正在使用useParams
“react-router”来执行此操作。
import { useParams } from 'react-router'
import { usePreload } from './hooks'
import Display from './Display'
const Overview = () => {
const { id } = useParams()
const { data } = usePreload(id) // uses useEffect to preload the data with the given id
return <Display data={data} />
}
export default Overview
我有一个故事
import Overview from './Overview'
import preloadData from './decorators/preloadData'
export default {
title: 'Redux/scenes/Overview',
decorators: [preloadData()],
component: Overview,
argTypes: {}
}
const Template = args => <Overview {...args} />
export const Default = Template.bind({})
装修preloadData
工很简单
import { usePreload } from '../hooks'
import { data } from './fixtures'
const Loaded = ({ children }) => {
useSubmissionsPreload(data.id) // loads the site data into the state
return <>{children}</>
}
const preloadData = () => Story => (
<Loaded>
<Story />
</Loaded>
)
export default preloadData
代码在站点中实际运行时一切正常,但在故事中运行时,没有可供拾取:id
的路径。useParams
现在我将跳过这个故事,只测试Display
组件,但我的完美主义者要求知道如何让它工作。
解决方案
我也遇到了问题,De2ev 的评论为我指明了正确的方向。然而,它并没有直接起作用,我不得不做些细微的改变。最后它使用以下代码:
import React from "react";
import { Meta } from "@storybook/react";
import MyComponent from "./MyComponent";
import { MemoryRouter, Route} from "react-router-dom";
export default {
title: "My Title",
component: MyComponent,
decorators: [(Story) => (
<MemoryRouter initialEntries={["/path/58270ae9-c0ce-42e9-b0f6-f1e6fd924cf7"]}>
<Route path="/path/:myId">
<Story />
</Route>
</MemoryRouter>)],
} as Meta;
export const Default = () => <MyComponent />;
推荐阅读
- c++ - 这个对象要么是 const 要么是左值;无论哪种方式,我们都无法就地排序
- javascript - React 函数组件 setTimeout - 多次渲染调用和重新渲染(推荐方法)(多次触发)
- laravel - 从 htaccess 密码保护中排除特定的 laravel 路由
- python - 在运行时导入模块,python
- git - 如何覆盖特定存储库的 GIT_OBJECT_DIRECTORY?
- maven - Extentreport 支持 Cucumber-JVM 4.0 (io.cucumber)
- python - 对于具有零值的参考角度,numpy sin 和 cos 不会完全返回零
- python - 通过 xpath 枚举元素时 Selenium chromedriver 异常
- buildroot - Pocketsphinx french 在我的 buildroot 嵌入式设备上不起作用
- node.js - NodeJS:承诺/等待会加快我的代码吗?