首頁猿問 Storybook 6 -...

Storybook 6 - 如何設置對象數組？

JavaScript

藍山帝景 2023-06-15 15:38:21

我想為我的 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]如何添加帶有對象數組的旋鈕并進行全面更新？

查看完整描述

3 回答

森林海

TA貢獻2011條經驗獲得超2個贊

我將數據數組移動到組件中，現在它工作得很好。我唯一注意到的是對象數組必須通過object方法傳遞，現在它可以工作并刷新頁面。

export const Primary = () => {

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

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

]);

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

};

反對回復 2023-06-15

侃侃無極

TA貢獻2051條經驗獲得超10個贊

使用 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'}

}

反對回復 2023-06-15

呼啦一陣風

TA貢獻1802條經驗獲得超6個贊

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

}

})

反對回復 2023-06-15

3 回答
0 關注
207 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Storybook 6 - 如何設置對象數組？

Storybook 6 - 如何設置對象數組？

3 回答

添加回答

Storybook 6 - 如何設置對象數組？

Storybook 6 - 如何設置對象數組？