在 Storybook 选择选项中导入道具

Posted 2023-02-19

【中文标题】在 Storybook 选择选项中导入道具

【英文标题】：Import props in Storybook select options

【发布时间】：2021-11-06 22:40:24

【问题描述】：

我指定了接口：

interface Props
   type: 'dog' | 'cat' | 'mouse' | 'turtle' | 'rabbit'


export default Props;

实际上，所有允许的string 值的列表很长。是否可以根据Props 在Storybook 中填充我的故事？

我试过这样做：

import React, ReactElement from 'react';
import Props from '../typings';

export default 
  title: 'Animals',
  component: Animal,
  argTypes: 
    type: 
      control: 
        type: 'select',
        options: [...Props.type],
      ,
    ,
  ,
;

【问题讨论】：

恐怕你不能。接口和类型只能在类型赋值中，不能在非类型中。

【参考方案1】：

可能有一些技巧可以满足您的需求，但大多数都要求您保持字体方面。检查，Get keys of a Typescript interface as array of strings

但我发现了一种易于应用的解决方案。

class Props 
   id = ''


const k = Object.keys(new Props())
console.log(k)

如果你把它定义为一个类，一旦它基于这个类创建了一个新的类，那么其他的一切都变成了一个实例化的变量。