storybook [Bug]: 折叠所有损坏的(api.collapseAll不是一个函数)

az31mfrm  于 3个月前  发布在  其他
关注(0)|答案(1)|浏览(30)

描述bug

"折叠所有"功能失效。它在控制台记录了一个错误:

Uncaught TypeError: api.collapseAll is not a function

复现链接

https://635781f3500dd2c49e189caf-hyyihpyiuz.chromatic.com

复现步骤

  1. 访问一个 Storybook
  2. 打开主菜单(齿轮图标)
  3. 点击 "折叠所有"
  4. 检查浏览器控制台

系统信息

Storybook 8.1.11

其他上下文信息

  • 无响应*
tktrz96b

tktrz96b1#

要解决 api.collapseAll is not a function 错误,需要在 API 中实现 collapseAll 函数并确保它在 Menu.tsx 文件中正确引用。

  • 在 API 中实现 collapseAll:
  • 找到定义其他函数(如 toggleNavtoggleToolbar 等)的 API 文件。
  • 添加 collapseAll 函数。
// Example API implementation
export const collapseAll = () => {
  // Logic to collapse all items
};
  • 更新 Menu.tsx:
  • 确保 collapseAlluseMenu 钩子中正确导入和使用。
import { collapseAll } from 'path-to-api';

const collapse = useMemo(
  () => ({
    id: 'collapse',
    title: 'Collapse all',
    onClick: () => api.collapseAll(),
    right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
  }),
  [api, enableShortcuts, shortcutKeys]
);
  • 确保 useExpanded.ts 处理折叠事件:
  • 验证 useExpanded 正确监听 STORIES_COLLAPSE_ALL 事件并调用 collapseAll 函数。
useEffect(() => {
  if (!api) return noop;

  api.on(STORIES_COLLAPSE_ALL, collapseAll);

  return () => {
    api.off(STORIES_COLLAPSE_ALL, collapseAll);
  };
}, [api, collapseAll]);

参考资料

/code/core/src/manager/container/Menu.tsx
/code/core/src/manager/components/sidebar/useExpanded.ts

关于 Greptile

此响应为您提供研究起点,而非精确解决方案。
帮助我们改进!如果这有帮助,请留下一个 👍,如果无关紧要,请留下一个 👎。
Ask Greptile · Edit Issue Bot Settings

相关问题