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

Question

我想为我的 Badge 组件传递数据道具，但我对 addon-knobs 库中的 array 方法有疑问。 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

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

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

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

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

从“@storybook/addon-knobs”导入{文本、数字、布尔值、数组、select、对象}；

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

})

Answer 3

对于 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'}
      }
    }
  }

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

Storybook 6 - how to set array of objects?

javascript

reactjs

storybook