React Storybook 中不可见的面板

Posted 2023-02-19

技术标签:

【中文标题】React Storybook 中不可见的面板【英文标题】：Panels not visible in React Storybook 【发布时间】：2018-09-03 06:15:54 【问题描述】：

我在运行节点版本 6.3.1 和 npm 版本 3.10.6 的 Windows 7 上使用 Storybook 版本 3.3.15。

在运行故事书时，我在呈现操作面板的页面底部看到“没有可用的面板”消息。我在 addons.js 中导入了 addon-actions：import @storybook/addon-actions/register，并且该模块也存在于 node_modules 文件夹中。在 webpack 编译或浏览器控制台中，我没有收到任何关于此的错误。

如何让操作面板出现？

注意：我无法更新 Node 和 NPM 版本，因为我正在开发一个涉及很多人的专业级应用程序，而且它的代码库非常大。

【问题讨论】：

【参考方案1】：

我遇到了类似的问题，安装@storybook/addons（除了你提到的步骤）修复了它。

运行：

npm i -D @storybook/addons

【讨论】：

【参考方案2】：

就我而言，我缺少.storybook/addons.js 文件。在最近的版本中，这似乎成为了一项要求，因为 actions 插件最初对我来说很好用。

澄清潜在的混淆：

As the documentation specifies, 你需要在隐藏的.storybook/ 目录中有一个addons.js 文件（很可能在你项目的根目录），即使它只包含这 1 行.

import '@storybook/addon-actions/register';

【讨论】：

【参考方案3】：

在我的情况下，它们只是被隐藏并且方向错误。必须使用D 和A 键盘快捷键才能让它们再次出现。

【讨论】：

对我来说也一样。我将showPanel 选项设置为false。 OMFG：一个洞天更新洞项目才发现它被隐藏了...... 你是个救命稻草，我讨厌走捷径哇。我浪费了令人尴尬的时间，不知道为什么这个面板没有显示。谢谢！【参考方案4】：

首先，检查您是否在 Stoybook UI 屏幕左上角的下拉菜单中将插件面板设置为显示/隐藏，还检查名为“更改插件方向”的下拉项（我的已更改并且是由于屏幕宽度而撞出屏幕）。

如果这不起作用，请尝试在 storybook config.js 文件中设置选项：

在 Storybook config.js 文件中，您可以为一些默认设置添加选项参数，这包括设置插件面板的可见性和位置。

import  addParameters  from '@storybook/react';

// settings for storybook - show and position addon panel
addParameters(
  options: 
    // display panel that shows addon configurations
    showPanel: true,
    // where to show the addon panel --- @type ('bottom'|'right')
    panelPosition: 'bottom',
  
);

【讨论】：

【参考方案5】：

在我的情况下，只需点击 d 就可以了

【讨论】：

【参考方案6】：

在 Mac 中，我通过按 fn + s 解决了它。

【讨论】：

【参考方案7】：

对我来说，整个主菜单在某一时刻消失了。唯一有帮助的是在控制台中运行sessionStorage.clear()，然后刷新页面。

【讨论】：

我可以确认这对我有用。感谢您的提示！【参考方案8】：

我只是通过尝试键盘上的不同键才发现的：