如何解决如何实现 Storybook + Custom Block (Gutenberg)?
我基本上需要为一些解析的 HTML 块创建一个故事书。 问题是其中一些组件直接从 Redux 接收数据,而不是从 props 接收数据。
例如:
屏幕:
...
return (
<>
<PageTransition isLoading={loading} />
<Main pageBackgroundColor={pageBackgroundColor}>
{content}
</Main>
</>
);
解析:
...
{
replaceChildren: true,shouldProcessNode: (node) => {
return node?.attribs?.['data-replace'] === 'overview';
},processNode: () => {
return <Overview />;
},},...
组件:
export const Overview = () => {
const { client,brand,overview } = useSelector(state => state.workDetail);
const brandName = brand || client;
return (
<section className={styles.overview}>
<div className={styles.client}>
<span className={styles.title}>Client / {client}</span>
</div>
<div className={styles.content}>
<div>
<span className={styles.title}>Brand / {brandName}</span>
</div>
<div className={styles['overview-content']}>
{Parser.parse(overview)}
</div>
</div>
</section>
);
};
故事:
export default {
title: "Components/Overview",component: Overview,}
const Template = args => <Overview {...args} />;
export const Default = Template.bind({});
Default.args= {
overview: "This is a test",brand: "Brand here",client: "Client name",}
Default.parameters = {
fetch: {
json: {
overview: ["This is a test"],brand: ["Brand here"],client: ["Client name"],}
}
}
我已尝试按照 https://storybook.js.org/docs/react/workflows/build-pages-with-storybook 上的说明进行操作,不确定我是否做错了什么,但添加 storybook-addon-apollo-client
不起作用。也尝试使用 isomorphic-fetch
但没有成功。
这两种方法之一是正确的,而我做错了什么?或者实际上我遵循了错误的步骤?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。