在 Storybook 选择选项中导入道具答案

【问题标题】：Import props in Storybook select options在 Storybook 选择选项中导入道具
【发布时间】：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],
      },
    },
  },
};

【问题讨论】：

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

标签： reactjs typescript storybook

【解决方案1】：

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

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

class Props {
   id = ''
}

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

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

【讨论】：