故事书 6 - 如何设置对象数组？

Posted 2023-02-19

【中文标题】故事书 6 - 如何设置对象数组？

【英文标题】：Storybook 6 - how to set array of objects?

【发布时间】：2021-03-07 06:16:47

【问题描述】：

我想为我的 Badge 组件传递数据道具，但我对来自 addon-knobs 库的 array 方法有疑问。数据道具是一个对象数组，我试图像这样传递它：

const data = [
  object('First', color: '#fa2dac', text: 'RSS'),
  object('Second', color: '#fa2dac', text: 'RSS'),
];

结果是我有 2 个字段（第一个和第二个），但是当我想更改其中的值时，它们不会在屏幕上更新。

第二次尝试：

const data = array('List of items', [
  object('First', color: '#fa2dac', text: 'RSS'),
  object('Second', color: '#fa2dac', text: 'RSS'),
]);

这给了我相同的结果，但我得到了 3 个字段而不是 2 个字段，而第三个字段的值 [object Object]

第三次尝试：

const data = array('List of items', [
  color: '#fa2dac', text: 'RSS',
  color: '#fa2dac', text: 'RSS',
]);

这让我只提交了[object Object]

如何添加带有对象数组的旋钮并进行全面更新？

【问题讨论】：

您可以分享您尝试更新对象的代码吗？

更新了，请看

很抱歉，我无法确定您的代码存在问题:(

【参考方案1】：

使用“@storybook/addon-knobs”：“6.0.21”，“@storybook/angular”：“6.0.21”，

我有一个对象数组，我将其作为@Input() 链接传递：Links[];通过此设置，您将能够传递任何 JSON 对象。 角度组件：

export class HeaderComponent  
  @Input() links: Link[] = [];
  @Output() navigate = new EventEmitter<any>();

  linkClicked(link: Link)
    this.navigate.emit(link);
  

从'@storybook/addon-knobs'导入文本、数字、布尔值、数组、选择、对象；

import  HeaderComponent, Link  from './header.component';

export default 
  title: 'HeaderComponent'

let links: Link[] = [name: "link one", route: ""] 
export const primary = () => (
  moduleMetadata: 
    imports: []
  ,
  component: HeaderComponent,
  props: 
    links: object("links",links)
  

)

【参考方案2】：

我将数据数组移动到组件中，它现在可以正常工作了。我唯一注意到对象数组必须使用object 方法传递，现在它可以工作并刷新页面。

export const Primary = () => 
  const data = object('List of items', [
    color: '#fa2dac', text: 'RSaS',
    color: '#fa2dac', text: 'RSaS',
  ]);
  return <Badge data=data></Badge>;
;

【讨论】：

从哪里导入对象方法？

从'@storybook/addon-knobs'导入object；

您需要将此行添加到 main.js 文件中的插件中，然后首先安装它 '@storybook/addon-knobs/register'，

npmjs.com/package/@storybook/addon-knobs