- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为我的 react-realy
应用程序创建一个故事书,但我不知道如何为该组件设置模型数据。对于简单的组件来说没问题,因为我可以使用虚拟 UI 组件与容器 方法,但我不能将其用于嵌套中继组件,例如有一个 UserList
组件,我想添加到 storybook,我可以将中继片段部分拆分到容器,将 UI 部分拆分到组件,但是如果 UserList
子级太中继组件怎么办?当它们是 UserList
的组成部分时,我不能拆分它们吗?
是否有一些解决方案可以将中继组件添加到故事书?
最佳答案
我创建了一个名为 use-relay-mock-environment 的 NPM 包, 这是基于 relay-test-utils
它允许您使用 Relay 组件制作 Storybook 故事。
它允许嵌套 Relay 组件,因此您实际上可以为由 Relay 组件构成的完整页面制作故事。这是一个例子:
// MyComponent.stories.(js | jsx | ts | tsx)
import React from 'react';
import { RelayEnvironmentProvider } from 'react-relay';
import createRelayMockEnvironmentHook from 'use-relay-mock-environment';
import MyComponent from './MyComponentQuery';
const useRelayMockEnvironment = createRelayMockEnvironmentHook({
// ...Add global options here (optional)
});
export default {
title: 'MyComponent',
component: MyComponent,
};
export const Default = () => {
const environment = useRelayMockEnvironment({
// ...Add story specific options here (optional)
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
export const Loading = () => {
const environment = useRelayMockEnvironment({
forceLoading: true
});
return (
<RelayEnvironmentProvider environment={environment}>
<MyComponent />
</RelayEnvironmentProvider>
);
};
您还可以添加 <RelayEnvironmentProvider />
作为装饰者,但如果你想为不同的状态/模拟数据创建多个故事,我建议不要这样做。在上面的例子中,我展示了 2 个故事,Default
一个,还有一个Loading
一个。
不仅如此,它需要最少的编码,您不需要添加 @relay-test-operation
指令到您的查询,然后使用 faker.js 自动为您生成模拟数据,让您专注于重要的事情,这就是构建出色的 UI。
如果您想实现类似的功能,请随时查看此处的源代码:https://github.com/richardguerre/use-relay-mock-environment .
注意:它仍处于早期阶段,所以有些事情可能会改变,但希望得到一些反馈!
我还创建了 relay-butler ,这是一个接受 GraphQL 片段并输出 Relay 组件的 CLI,包括包装片段组件的自动生成的查询组件,以及包装该查询组件的 Storybook 故事(默认情况下为 Default
和 Loading
)。实际上,在几分钟内,我就可以创建漂亮的 Relay 组件,这些组件在 Storybook 中“记录”了。
也希望得到一些反馈!
关于relayjs - 如何将 react-relay 组件添加到故事书?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45467796/
我是一名优秀的程序员,十分优秀!