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 = () => {

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

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

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

  ]);

  return <Badge data={data}></Badge>;

};

Answer 2

使用 6.4.19 Storybook，您应该映射您的选项。目前，不推荐使用@storybook/addon-knobs。

  argTypes: {

    data: {

      control: {

        type: 'select',

        labels: {

          first: 'First Option',

          second: 'Second Option'

        }

      },

      options: ['first', 'second'],

      mapping: {

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

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

      }

    }

  }

Answer 3

使用 "@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);

  }

}

import { text, number, boolean, array, select, object } from '@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)

  }

})