时间戳

首页 > 解决方案 > 使用反应故事书的复杂布局

reactjs - 使用反应故事书的复杂布局

问题描述

我是反应故事书的新手，到目前为止，我已经创建了相对简单的故事，如下所述：

import React from 'react';
import { action } from '@storybook/addon-actions';

export default {
  title: "Test"
}

export const test = () => <textarea onClick={action('textarea clicked')}>Hong test from me</textarea>;
export const input = () => <input type="text"></input>;

有了这些知识，我想继续创作复杂的故事，如下图所示：

在此处输入图像描述

是否有任何教程可以帮助我实现这一目标。

谢谢

标签： reactjsstorybook

解决方案

我不确定我是否正确理解了你的问题，但我会尽力给你一个答案。我们通常对故事书故事做的是创建故事，然后在其中导入一个复杂的组件。

import React from 'react';
import { storiesOf } from '@storybook/react';
import { CustomComponent } from '../src';

storiesOf('CustomComponent', module)
      .add('Custom Component story 1', () => (
        <CustomComponent />
  ));

推荐阅读