如何实现 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 (将#修改为@）