问题标签 [storybook]

所以我的故事书中有两个组件RadioButton和RadioButtonWithIcons. 在两个组件的初始渲染中，我componentDidMount开始做一些工作。然后ComponentDidUpdate触发组件中的任何更改。

但是，如果我从侧面板切换 RadioButton到RadioButtonWithIcons，它会立即触发RadioButtonWithIcons' ComponentDidUpdate... 为什么会发生这种情况？

我正在尝试配置故事书项目并得到奇怪的错误。错误：未捕获（承诺）：错误：无法匹配任何路由。URL 段：'iframe.html'

为什么会发生以及如何解决？

故事：

MY_PROJECT是一个 git 子模块，它有自己的小路由，像这样

在我的 React Storybook 中，我使用了旋钮，我想为虚拟数据添加一个旋钮。这是我的故事书组件示例：

我想像这样添加一个旋钮：

使用 Storybook + 旋钮可以实现这种动态虚拟数据吗？

我想将视觉故事快照添加到我们的项目中。根据文档，您可以将其配置为针对故事书的静态构建运行（https://github.com/storybooks/storybook/tree/master/addons/storyshots#specifying-the-storybook-url）。

我在项目中有静态构建文件夹（在运行 npm run build storybook 之后），我可以看到那里的所有文件。

我尝试设置相对于 Storyshots.test.js 文件、相对于 package.json 甚至相对于 webpack.config.js 的路径。我得到：“连接到 ./storybook-static/iframe.html?selectedKind= 时出错，您是先启动还是构建故事书？使用图像快照功能时应该运行故事书实例或构建静态版本”（ COMPONENT 被实际组件替换）。

任何想法 ？

我有一个组件“项目”和一个容器。容器有一个延迟加载功能，我用它来加载项目。所以我必须触发该功能，以显示项目。如何触发故事书中的功能？

我在我的 React 组件中使用了 google 对象（例如新的 google.maps.places.PlacesService()）。这是我想使用 Story book 测试/优化的组件。在故事书配置中，我尝试将“preview-head.html”中的 googapis 作为指向“ https://maps.googleapis.com/maps/api/js?key= ...的脚本调用。

但是，当故事书加载/启动时，我的反应组件抛出异常“ReferenceError: google is not defined”。似乎，上面的 api 没有正确调用。

感谢您的帮助。

谢谢！

我有一个 React Native 项目设置react-native init，正在使用 Storybook 来单独开发我的组件。我getstorybook在这个项目中运行了命令，CLI 生成了一个storybook包含所有必要文件的目录，如Storybook docs中所述。
当我运行npm run storybookcommand 后跟 时react-native run-android，我可以在我的模拟器上查看故事。现在，如果我需要运行我的主应用程序（不是故事书，而是由react-native init命令生成的那个），我必须先npm run start运行react-native run-android.
每次我从 Storybook 切换到我的主应用程序时，有没有办法不必构建应用程序？我在这里遗漏了一些明显的东西吗？
提前致谢！

我有一个大型 React 项目（项目 A），我正在创建一个组件库（项目 B）以在该项目中使用。项目 B 使用依赖项“react-responsive-carousel”来创建幻灯片卡，我想在多个项目中使用它，包括项目 A。

在 Project B 的 Storybook 下查看时，幻灯片和卡片看起来很棒并且按预期工作。将卡组件（位于项目 B 中）加载到项目 A 中时，我遇到了以下反应错误（以及损坏的幻灯片）：“无法在未安装的组件上找到节点。”

如果我删除使用第三方依赖项 react-responsive-carousel 的幻灯片，错误就会消失，我可以在项目 A 中看到我的卡。我使用了 npm 链接以及通过本地文件路径安装依赖项，并且不良行为以两种方式发生。

项目 B（组件库）正在使用 React 16.3.2。项目 A 正在使用 React 15.6.2。

我曾尝试将 Project A 的 React 版本降级到 15.6.2，但这会导致 Storybook 出现错误，我想继续使用它来共享组件目录。

将项目 A 更新到 16.3.2 是可能的，但我宁愿现在不这样做，因为引入新版本的 React 会破坏项目 A 的风险。此处介绍了此解决方案：我的项目（反应 15）可以使用使用反应 16 的依赖项吗？

我可以使用对等依赖项来解决这个问题吗？对等依赖项是否已弃用？是否有其他潜在的解决方案我可以探索，或者我应该接受它并更新项目 A？

根据要求，这是一些代码。我已经简化了很多，试图只保留与这个问题有关的内容。

B项目的依赖：

项目 A 的依赖项：

项目 B 中的 Card 组件：

在项目 B 中，我只是导入卡并使用它：

我们正在使用Storybook及其StoryShots 插件来可视化和测试我们的 ReactXP 组件。

最近，在这些 StoryShot 上运行测试的 CI 作业开始因快照不匹配而失败。

事实证明，当我们从 Mac 开发环境更新快照时，快照包含一个webkitFlexDirection样式，而 CI 环境生成的快照（基于 docker 映像node:9）没有此属性：

我不知道这webkitFlexDirection是从哪里来的，也不知道为什么它出现在我的 Mac 上生成的快照中，而不是在测试 Docker 映像中生成的快照中。

我webkitFlexDirection在许多顶级存储库（React、ReactXP、Jest、Storybook、StoryShots 等）中搜索过，但一无所获。

我想它react-test-renderer使用一些库来生成快照，并且该库将负责生成（或不生成）webkitFlexDirection属性，但我无法弄清楚。

在模拟用户与酶​​的交互后，我正在使用故事书来可视化 React 组件的更改。作为一个小例子，我想要一个在单击其中一个按钮后显示组件的故事。

我遇到的问题是组件的构造函数被调用了两次：一次是通过酶安装组件时，然后是在故事书显示组件时。这会将组件恢复到其默认状态，因此模拟用户交互之后的任何更改都将丢失。

这是一些显示问题的代码。故事加载后，按钮组件处于“未点击”状态，即使点击是用酶模拟的：

故事档案：

控制台的输出将是：