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

Question

您好，我正在使用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对故事进行现场编辑，例如：

以上示例的代码如下：

`` story.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文件：

const Test = class Welcome extends React.Component { render() { return <h1>Hello, world!!</h1>; } }

export default Test;

结果是，它在“实时标签”上显示了代码，但实际上未在顶部窗口中呈现。

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

谢谢。

Answer 1

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

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

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