2

我的问题是我正在尝试使用自述文件插件显示我的故事，但它没有按我想要的顺序显示，而且我看不出我的实际代码与来自 github 的代码有何不同例如。

index.js

import React from 'react'
import { storiesOf, configure } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withDocs } from 'storybook-readme'

import ActionButton from 'action-button'

import actionButtonReadme from './documentation/ActionButton.md'

storiesOf('Components', module)
    .add('ActionButton', withDocs(actionButtonReadme, () => {
        return <ActionButton btnClass='btn btn-trans btn-info mgt-10 mgr-5'
            iconClass='fa fa-info'
            tooltipText='Info button'
            clickAction={action('transparent info button')}
        />
    }))

动作按钮.md

# ActionButton

### Usage
```javascript
import ActionButton from 'action-button'
```

### Exemple

插件.js

import '@storybook/addon-actions/register'
import '@storybook/addon-options/register'
import 'storybook-readme/register'

配置.js

import {
    configure
} from '@storybook/react'
import { setOptions } from '@storybook/addon-options'

function loadStories() {
    require('./index.js')
}

configure(loadStories, module)

setOptions({
    name: 'b2-common-components'
})

我得到了什么

我想要的是

来自 github 的演示

import { withDocs } from 'storybook-readme';
import ButtonREADME from '../components/components/button/README.md';

storiesOf('Button', module)
// add only one README (also supports multiple as array)
    .add('Default', withDocs(ButtonREADME, () => {
        return <Button onClick={action('clicked')} label="Hello Button"/>;
}));

我想知道我的代码哪里出错了。

4

1 回答 1

-1

我最终放弃并使用了widthDocs我因为这个原因而避免使用的东西https://github.com/tuchk4/storybook-readme/issues/43。

使用文件中的widthDocs方法和<!-- SCRIPT -->标签可以帮助我解决一些与样式有关的问题，并且可以仅在文件.md的一部分添加故事和我的自定义组件。.md

于 2018-01-03T08:04:43.753 回答