Storybook 6 - 如何设置对象数组？

Question

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

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'}),

]);

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

第三次尝试：

const data = array('List of items', [

  {color: '#fa2dac', text: 'RSS'},

  {color: '#fa2dac', text: 'RSS'},

]);

这让我只提交了[object Object]

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

Answer 1

我将数据数组移动到组件中，现在它工作得很好。我唯一注意到的是对象数组必须通过object方法传递，现在它可以工作并刷新页面。export const Primary = () => {&nbsp; const data = object('List of items', [&nbsp; &nbsp; {color: '#fa2dac', text: 'RSaS'},&nbsp; &nbsp; {color: '#fa2dac', text: 'RSaS'},&nbsp; ]);&nbsp; return <Badge data={data}></Badge>;};

Answer 2

使用 6.4.19 Storybook，您应该映射您的选项。目前，不推荐使用@storybook/addon-knobs。&nbsp; argTypes: {&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; control: {&nbsp; &nbsp; &nbsp; &nbsp; type: 'select',&nbsp; &nbsp; &nbsp; &nbsp; labels: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; first: 'First Option',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; second: 'Second Option'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; options: ['first', 'second'],&nbsp; &nbsp; &nbsp; mapping: {&nbsp; &nbsp; &nbsp; &nbsp; first: {color: '#fa2dac', text: 'RSS'},&nbsp; &nbsp; &nbsp; &nbsp; second: {color: '#fa2dac', text: 'RSS'}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }

Answer 3

使用 "@storybook/addon-knobs": "6.0.21", "@storybook/angular": "6.0.21",我有一个对象数组，我将它们作为 @Input() 链接传递：Links[]; 使用此设置，您将能够传递任何 JSON 对象。角度组件：export class HeaderComponent&nbsp; {&nbsp; @Input() links: Link[] = [];&nbsp; @Output() navigate = new EventEmitter<any>();&nbsp; linkClicked(link: Link){&nbsp; &nbsp; this.navigate.emit(link);&nbsp; }}import { text, number, boolean, array, select, object } from '@storybook/addon-knobs';import { HeaderComponent, Link } from './header.component';export default {&nbsp; title: 'HeaderComponent'}let links: Link[] = [{name: "link one", route: ""}]&nbsp;export const primary = () => ({&nbsp; moduleMetadata: {&nbsp; &nbsp; imports: []&nbsp; },&nbsp; component: HeaderComponent,&nbsp; props: {&nbsp; &nbsp; links: object("links",links)&nbsp; }})