有人知道 React Storybook 的 Knobs 插件中选择旋钮的内部工作吗？

问题描述

我在 Typescript 中开发了一个用于条件文本搜索的 React 组件，如下所示：

故事书选择旋钮工作正常：

实现它的故事书代码：

<FilterComponentnt
                ...props
                accountNameTextCompareMethod={ConvertTextOptionItem(select('Account name search options',['Starts with','Contains','Equals','Ends with'],'Starts with'))}
                                    
                    />

Prop accountNameTextCompareMethod 是 enum 类型：

export enum TextCompareMethod {
            StartsWith = 0,Contains = 1,EndsWith = 2,Equals = 3
        }

函数ConvertTextOptionItem获取从select旋钮中选择的字符串并将其转换为枚举TextCompareMethod；正如您在图 2 中看到的那样工作正常

但是当我在真实的应用程序中（在容器中）使用该组件并尝试通过设置状态设置相同的组件属性 accountNameTextCompareMethod 时：

const [accountNameCompareMethod,setAccountNameCompareMethod] = useState<TextCompareMethod>(props.accountNameTextCompareMethod ?? TextCompareMethod.StartsWith);

<FilterComponentnt
                ...props
                accountNameTextCompareMethod={accountNameCompareMethod} 
     ... />
                                    

现在它没有任何效果，组件的图标也不会像故事书中那样改变（图 2）。

我的问题是：故事书 Knob select 如何成功设置相同的组件道具，但我从实际使用相同的组件（以 Redux 形式）设置它却没有？我做错了什么和/或 Storybook select 旋钮做对了什么？

感谢您的时间。

更新

const ConvertTextOptionItem = (item: string): TextCompareMethod => {
  switch (item.toLowerCase()) {
    case 'startswith':
    case 'starts with':
      return TextCompareMethod.StartsWith;
    case 'endswith':
    case 'ends with':
      return TextCompareMethod.EndsWith;
    case 'contains':
    case 'contain':
      return TextCompareMethod.Contains;
    case 'equals':
    case 'equal':
      return TextCompareMethod.Equals;
    default:
      return TextCompareMethod.StartsWith;
  }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）