首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

可以在storybook装饰器中访问story的数据吗?

可以在storybook装饰器中访问story的数据。Storybook是一个用于开发、测试和演示UI组件的工具,而装饰器是Storybook中的一种机制,用于增强和扩展故事(Story)的功能。在storybook装饰器中,可以通过参数访问story的数据。

在Storybook的装饰器中,可以使用parameters参数来访问story的数据。parameters是一个对象,可以包含各种自定义属性和值。通过在装饰器中使用parameters参数,可以在story中传递和访问数据。

下面是一个示例,展示如何在storybook装饰器中访问story的数据:

代码语言:txt
复制
import { storiesOf } from '@storybook/react';
import { withSomeDecorator } from './decorators';

const MyStory = () => <div>My Story</div>;

storiesOf('MyComponent', module)
  .addDecorator(withSomeDecorator)
  .add('MyStory', () => <MyStory />, {
    parameters: {
      data: {
        foo: 'bar',
        baz: 'qux',
      },
    },
  });

在上面的例子中,withSomeDecorator是一个自定义的storybook装饰器,通过.addDecorator()方法将其应用到故事中。在.add()方法中,我们可以通过parameters属性传递数据到故事中。

在装饰器中,可以通过context参数访问story的数据。下面是一个简单的示例,展示如何在装饰器中访问story的数据:

代码语言:txt
复制
export const withSomeDecorator = (storyFn, context) => {
  console.log('Story data:', context.parameters.data);

  return storyFn();
};

在上面的例子中,withSomeDecorator装饰器函数接受两个参数:storyFn表示story的函数,context表示story的上下文。通过context.parameters.data可以访问story中传递的数据。

总结:在storybook装饰器中,可以通过parameters参数传递数据到story中,并通过context参数在装饰器中访问该数据。这样可以实现对story的数据访问和操作,以增强和扩展故事的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

服务端来自火星,客户端来自金星,RSC 开发新思路

第二个区别是:服务端组件可以直接访问 Node 代码,在这个示例,函数 findById 封装了一个经过验证数据库连接。 为了实现这两点,RSC 底层做了很多事情。.../nextjs 7.x 版本,你也可以手动将 RSC story 封装到装饰。...创建好数据访问层后,你就可以浏览通过模拟来运行它,并精确控制返回数据,展示不同用户界面状态(加载、错误、成功等)。...你可以使用模块模拟或网络模拟来模拟数据访问层,这两种方式 Storybook 都支持。...有什么问题本文中,我们成功地 Storybook 为 RSC 编写了第一个 story,并展示了这一切是幕后是如何实现

18710
  • Go 装饰模式 API 服务程序使用

    Python 装饰    Python 装饰功能非常好解决了这个问题,下面的伪代码展示了一个例子,检查 token 逻辑放在了装饰函数 check_token 里,接口函数上加一个...虽然说不用装饰一样可以将公共逻辑抽取出来,但是调用还是要写在每个接口函数函数体里,侵入性明显大于使用装饰方式。 # 装饰函数,用来检查客户端 token 是否有效。...pipeline   装饰功能已经实现了,但如果接口函数需要调用多个装饰,那么函数套函数,还是比较乱,可以写一个装饰处理函数来简化代码,将装饰及联起来,这样代码变得简洁了不少。...  API 服务程序可能会需要判断用户是否有权限访问接口,如果使用了 MVC 模式,就需要根据接口所在 module 和接口自己名称来判断用户能否访问,这就要求在装饰函数中知道被调用接口函数名称是什么...  接口可能会有要求客户端必须传某些特定参数或者消息头,而且很可能每个接口必传参数都不一样,这就要求装饰函数可以接收参数,不过我目前还没有找到 pipeline 方式下传参方法,只能使用最基本方式

    3.3K20

    vue 开发常用工具及配置二

    目录 1,代理后端接口,关于 /api/ping 2,storybook 3,源码 ---- 1,代理后端接口,关于 /api/ping 作者个人工作喜欢用go语言,因为它简单方便。...浏览访问http://0.0.0.0:8080/ping,可以看到接口有返回。 以下是准备后端接口,以便测试。...devServer.proxy配置本地调试接口时特别有用,因为多数情况下,开发环境接口地址与正式环境是不一致。...2,storybook 一个组件配置可能很多,为了让学习者直观查看,可以利用storybook写很多story左侧每一项点击打开后,都是组件一个不同状态,这个不同状态,就是一个story。...通过示例代码可以发现,每个story都是一个独立用例组件: export const text = () => ({ components: { MyButton }, template: '

    1.1K20

    PowerBI切片可以带个度量值

    近日在给客户完善报告时,客户对以下切片并不是很满意: ? 他想是”如果能在切片显示每个地区城市数量就好了“。就像这样: ? 安排!...首先在地区表添加一列: 城市数量 = CALCULATE(DISTINCTCOUNT(data[城市])) 然后再添加一列: 地区(城市数量) = [地区]&"("&[城市数量]&")" ?...然后将数据地区列和地区表地区列建立关系: ? 然后将地区(城市数量)一列作为切片: ? 每次报告刷新时,新建列也同样会进行更新,所以切片数据是及时准确。...本以为用户可以很满意了,不过甲方就是甲方,继续提出了几个问题: 1.能不能按照城市数量由多到少排序? 2.如果我还有其他切片,能否随着其他切片变化呢?...比如西北地区销售”桌子“城市有15个,能否在产品类型选择”桌子“时,地区切片中西北后括号里显示15呢? 尝试了一番,没有找到解决方案,尴尬。 甲方虐我千万遍,我待甲方如初恋。

    2.5K40

    Storybook 7 来了:迄今为止最大更新

    对于SvelteKit来说,这意味着可以自动配置框架特有的设置,比如使用app/paths安全检索资源路径,支持app/stores和特殊lib导入别名,以及使组件可以访问app/environment...以组件为中心自动文档生成 Storybook 7 ,你现在可以直接将文档附加到你组件上。页面会出现在侧边栏,与组件 stories 一起显示,而不是以前选项卡式用户界面。...官方文档里可以了解更多有关这些变化信息。 改进交互测试和代码覆盖率 Storybook 迅速成为测试组件最佳选择。你可以通过向 story 附加 play 函数将其转换为测试。...你可以浏览调试事件流,并使用我们测试运行从命令行并行执行所有测试。...或者,你可以使用参数 story 级别覆盖主题值。

    50830

    React 中使用 Storybook,构建强大自定义 UI 组件

    该工具有一个广泛插件生态系统,可以帮助扩展和调整您应用程序。此外,它还集成了最流行JavaScript框架,如React、Vue甚至Ruby。 你应该在React中使用Storybook?...防止重复工作:有时,开发人员创建一个组件,却发现代码库已经有类似的东西了。有了Storybook,每个组件都被记录下来,其他人也可以访问,从而避免了重复工作。...创建第一个 Story 将一个文件添加到/stories文件夹之后,我们需要添加一个相关故事文件来查看Storybook组件。...Storybook查看story 让我们重新查看Storybook实例,并导航到我们刚刚创建组件。... React APP 中使用 story 要在React应用中使用这个故事,我们可以导入创建好Banner。在你Next.js安装,把jsx文件放到index.js文件夹

    9.2K10

    从 Styleguidist 迁移到 Storybook

    它拥有强大社区支持和丰富插件生态系统,可用于易访问性测试、跨浏览测试和其他用途。 Storybook ,用户可以通过 Story 来逐个浏览和开发组件示例。... Storybook ,开发人员可以通过 react-docgen 自动生成控件,用户可以文档 UI 中直接修改和预览组件。...首先,我们提取 Styleguidist 代码块,Markdown 文件其余内容(例如文字描述)可以直接逐字复制到新 MDX 文件。为了实现一对一迁移,我们将每个代码块视为一个 Story。.../Button'; 为了减少开发人员迁移过程负担,我们决定将一个组件所有 Story 都包含在同一个 component.stories.js 文件,然后显示 component.stories.mdx...我们可以用生产环境现有的 webpack 配置来扩展 Storybook 构建配置,这样就可以保留 Storybook 自动 docgen 功能,以及其他一些特性,比如代码块预览。

    1.4K20

    storybook插件说明: integrations与addons推荐

    links插件这个插件比较常用,可以不同story间进行跳转,可以当是个a链接用。links插件文档。knobs插件这个插件厉害了,主要是用来生成变量,并可以进行在线切换用。比如最简单切换文字。...插件文档地址storybook-graphql-kit 插件也是graphql一套工具,可以在线修改数据之类。...插件文档地址Readme 插件这个功能有点对标了docs插件,感觉适合纯内部分享使用,它可以对每个story做一个文档说明,并且功能和docs差不多,就是docs是tab页并且可以独立输出,这个是addons...不过这个只支持5以下,storybook6本身就可以自己导出给sketch了。插件文档地址jsx插件这个插件感觉有点对标source,或者是docs部分功能。可以显示storyjsx怎么写。...插件文档地址Storybook Playroom Addon 插件可以同时浏览不同分辨率下效果。

    1K20

    React 应用架构实战 0x2:构建和文档化组件

    React ,所有的东西都是组件。这种范式允许我们将用户界面拆分成更小部分,从而更容易开发应用程序。它还启用了组件可重用性,因为我们可以多个地方重复使用相同组件。...使用 Storybook 一些好处: Storybook 允许隔离环境开发组件,而无需重现应用程序精确状态,从而使开发人员可以专注于他们正在构建东西 Storybook 作为 UI 组件目录... Storybook 展示方式。...# 文档化组件 src 文件夹以 .stories.tsx 结尾任何文件都会被 Storybook 筛选出来并作为 story 处理。...CSF 需要以下内容: 默认导出应定义有关组件数据,包括组件本身、组件名称、修饰符和参数 命名导出应定义所有 story # 创建 Story src/components/button/button.stories.tsx

    82810

    使用storybook管理React组件

    使用storybook插件功能 storybook很多功能都是靠插件来实现,大多数插件都需要提前注册,页面中有一个单独tab来对storybook进行增强。...register'; // 组件可视化配置 @storybook/addon-info插件比较特殊,不需要提前注册,它可以显示story源码,并针对props提供一些文档。...结构文档(类似于html源码),可以无痛集成到组件测试。...; 组件挂载后,通过断言来测试UI组件属性,更多使用方法可以参考specifications插件使用。...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现,其原理是利用Puppeteer无头chrome浏览storybookurl绑定组件特点,来渲染不同UI组件,再进行图片快照对比

    3.4K20

    试试 Storybook

    storybook init 项目里加了 2 个目录: .storybook 和 src/stories .storybook是配置文件, src/stories 下是组件。...组件渲染完就会自动执行 play 函数: 当然,这个案例不大好,用表单来测试 play 功能会更好点: 此外,你还可以渲染组件之前请求数据,然后把数据传入 render 函数再渲染: 渲染出来是这样...不只是自动生成组件文档这么简单,你可以定义不同 Story,这些 Story 可以传入不同 props、可以请求数据可以自定义渲染内容、还可以定义自动执行脚本。...可以 .storybook preview.tsx 里配置这个: 总结 写组件文档,我们一般都是用 Storybook。...它把不同 props 渲染结果叫做一个 story,一个组件有多个 storystory 可以指定传入组件参数、请求数据、通过render自定义渲染内容、自动执行play脚本等。

    36210

    storybook介绍和使用 比较火响应式UI开发及测试环境

    可以可视化开发调试react,vue组件 官网:https://github.com/storybooks/storybook 至于为什么叫storybook,应该是敏捷开发user story...有关,找了篇 文章,不了解同学可以看下 根据官网介绍一个story是一个或多个UI组件单一状态,基本上像一个可视化测试用例。...storybook本身提供了很多组件,也可以添加自己组件作为story,方便他人查看,使用并测试。 使用storybook你需要有react或vue开发经验,并且熟悉es6。...下来带大家简单使用一下: 首先全局安装storybook命令: npm i -g @storybook/cli 来到一个已存在react项目,可以是由creat-react-app创建 根目录执行....add('to Storybook', () => ); // 使用action让storybook去记录log,可以页面的

    3.1K40

    单细胞亚群标记基因可以迁移不同数据

    首先处理GSE162610数据可以看到多个分组样品里面,巨噬细胞和小胶质细胞都蛮清晰界限: 巨噬细胞和小胶质细胞都蛮清晰界限 不知道为什么我自己处理后巨噬细胞和小胶质细胞界限并没有作者文章给出来图表那样足够清晰...降维聚类分群后,很容易根据文献里面的标记基因给出来各个亚群生物学名字,然后对不同亚群,可以找这个数据集里面的特异性各个亚群高表达量基因作为其标记基因: 特异性各个亚群高表达量基因 接下来我就在思考...,这样实验设计非常多单细胞数据集都可以看到,因为小鼠模型里面取脑部进行单细胞测序是很多疾病首选。...对GSE182803数据集进行同样处理 可以看到: image-20220102164343172降维聚类分群 这个数据集里面的 巨噬细胞和小胶质细胞也是很清晰界限。...接下来把GSE162610基因去GSE182803进行可视化 GSE182803 数据工作目录下面, 运行如下行代码: rm(list=ls()) library(Seurat) library

    1.2K50

    请问:Java注解与Python装饰是一回事

    当然,写这篇文章之前,也是查阅了很多文章,关于这个问题一些观点,汇总如下: Java 注解也叫元数据,一种代码级别的说明。Python 装饰是一种语法糖。...3、结论 由上得出,注解和装饰不同: 1、注解对只是干了检查、校验事,不会修改所标注代码。 2、装饰可以方法标注,并改变所修饰代码功能。...其实,java注解和反射可以实现python里装饰效果。 是不是又蒙了? 别急,我们接着往后看! 二、注解实现上看 注解好处:不改动源代码基础上,对源代码实现新功能。...结果如下图所示: 4、结论 由上可知,Java注解和反射可以实现python里装饰效果。...Java注解则不同,它是从语言层面为代码类,函数,字段增加一些运行时可以读到数据,而注解提供者要在运行时对这些元数据进行读取,并做相应处理。

    1.6K50

    云服务安装数据可以?云服务数据库安全?

    近年来已经有越来越多用户使用上了云服务,而随着使用者增加,很多云服务服务商对于云服务服务价格也开始松动,在这种良性循环下,很多用户都希望能够利用云服务来实现一些功能,那么云服务安装数据可以...云服务数据库安全?...云服务安装数据可以 数据库是很多用户都非常熟悉一种软件,但很多人都只普通电脑上使用过数据库,对于云服务由于比较陌生,因此对于能不能在云服务上也按照自己需求来安装数据库不是十分清楚,其实云服务目前所提供功能是非常丰富...,只要普通电脑上可以进行操作都完全可以云服务上进行,因此云服务安装数据库是完全可行。...云服务数据库安全 由于数据通常会保存大量机密重要文件,因此很多用户对于数据安全性都非常重视,虽然云服务安装数据库是完全可行,但云服务数据安全性却仍然让很多人感到担心,但其实云服务对于安全性考量远远超过了普通家用电脑

    29.8K20

    从零开始,手摸手搭建前端组件库

    升级注意事项从 babel7 开始,所有的官方插件和主要模块,都放在了 @babel 命名空间下,从而可以避免 npm 仓库 babel 相关名称被抢注问题Babel7 是对整个项目都生效配置...Storybook是一个辅助UI控件开发工具。通过story创建独立控件,让每个控件开发都有一个独立开发调试环境,可以单独查看每个组件不同状态,以及交互式开发和测试组件。...,更改了相关配置 并引入相关插件相关插件插件名称功能备注@storybook/addon-notes组件添加notes,装饰story注释文本信息@storybook/addon-actions...5.0 正式发布:有史以来变化最大版本引入Rollup打包介绍 Rollup 是一个 JavaScript 模块打包可以将小块代码编译成大块复杂代码,例如 library 或应用程序。...: 能够md运行代码。

    2.8K30

    搬砖 React 4 年,我总结了这些企业级应用要点

    在此节,我会分享企业环境中使用 Next.js 所积累原则。 模块化和组件化 原则:分而治之 庞大企业级应用领域,代码可以迅速变成一头难以驯服野兽。...下面是我构建可扩展应用时使用一些包。 React Query/Tanstack Query React Query 管理复杂企业应用数据获取和同步方面非常有益。...它提供了从 API 获取数据、缓存和处理变更统一方式。企业环境下,应用通常需要与多个 API 和服务进行交互。React Query 可以通过集中化数据管理和减少样板代码来简化这个过程。...可访问性 正确访问性功能,如 aria-label、aria-disabled 和焦点管理,可以确保辅助技术用户可以有效地与按钮进行交互。...这是 Storybook 强项。 跨浏览兼容性 不同浏览测试按钮组件,以确保行为和外观一致性。

    52640

    业务用例研究组织可以同一个建设系统可以变化

    2013-02-08 9:44:15 上孙安俊(359***041) 请问大家一个问题,业务用例研究组织可以同一个建设系统可以变化?...2013-02-08 9:44:51 潘加宇(3504847) 没有必要变化了 2013-02-08 9:46:55 潘加宇(3504847) 这个划定范围,能把你要改进场景被包在里头就可以。...2013-02-08 9:51:42 潘加宇(3504847) 部门就可以了,把这些场景组织到部门用例下面 2013-02-08 9:54:44 潘加宇(3504847) 既然改进范围波及整个部门,...2013-02-08 10:14:41 上李帅(958**7) 意味着缺少了资源 2013-02-08 10:25:47 上孙安俊(359***041) 请假与加班是相对可以进行调休 2013-02...2013-02-08 11:11:15 潘加宇(3504847) 请假本身不是部门用例,但会影响部门某些用例实现,把请假作为一个场景放在这些用例下面。

    2.7K30
    领券