如何在 Storybook 上实时编辑类/功能组件

Posted 2023-02-19

【中文标题】如何在 Storybook 上实时编辑类/功能组件

【英文标题】：How to live edit a class/functional component on Storybook

【发布时间】：2019-11-23 15:56:24

【问题描述】：

您好，我正在使用storybook/react 库来创建我的组件的故事。

到目前为止一切顺利，我按照https://www.learnstorybook.com/react/en/get-started 上的教程进行操作，并使用add 命令在屏幕左侧添加故事，如下所示：

add('archived', () => <Task task= ...task, state: 'TASK_ARCHIVED' ...actions /> );

Task 组件是一个功能组件。

我还使用来自https://github.com/vertexbz/storybook-addon-react-live-edit 的storybook-addon-react-live-edit storybook addon 对故事进行实时编辑，如下所示：

上面例子的代码是这样的：

`` stories.addDecorator(withLiveEditScope( React, Test ));

stories.add('simple JSX', withLiveEdit(return <div>hello there!!</div>, color: 'red'))`

这段代码很简单，因为我只显示 jsx 代码。

问题

我想实时编辑另一个文件中的functional 或class component，但函数withLiveEdit(source[, scope]) 和addLiveSource(name, source[, scope]) 只接受字符串作为source。

如果我像这样添加故事：stories.addLiveSource('demo', return $Test);

Test 是一个单独的Test.js 文件：

常量测试 = class Welcome extends React.Component render() return <h1>Hello, world!!</h1>;

export default Test;

结果是，它在“实时选项卡”上显示代码，但实际上并未在顶部窗口中呈现。

所以我的问题是，如何在 addLiveSource()/withLiveEdit() 上导入类或功能组件

谢谢。

【问题讨论】：

你也在用 webpack 吗？你看过 React Hot Module 重载包吗？ npm install --save-dev express webpack-dev-middleware webpack-hot-middleware

我正在使用 CRA 样板，它有 webpack。但是如果你在 github 上看到这个例子，它只是一个简单的 JSX，它作为 String 导入到函数中。我正在使用热重装。第一个截图工作正常，我可以进行实时编辑。

【参考方案1】：

我遇到了同样的问题，你可以这样做：

storiesOf(group, module)
  .addDecorator(withLiveEditScope( React, SomeFunctionComponent, StyledHeader ))
  .addLiveSource("title", `<SomeFunctionComponent><StyledHeader>hello</StyledHeader></SomeFunctionComponent>`);

基本上，您在addLiveSource 的模板文字中使用的任何内容都需要导入，您需要添加到withLiveEditScope。 唯一的缺点是您必须将其全部写在模板文字中（PS，如果您解决了该限制，请告诉我！）