故事书插件自述错误显示顺序

Posted 2023-03-16

【中文标题】故事书插件自述错误显示顺序

【英文标题】：storybook addon readme wrong display order

【发布时间】：2018-06-09 05:45:24

【问题描述】：

我的问题是我正在尝试使用自述文件插件显示我的故事，但它没有按我想要的顺序显示，而且我看不出我的实际代码与那个有什么不同来自 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')
        />
    ))

ActionButton.md

# ActionButton

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

### Exemple

addon.js

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

config.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'
)

What I get

What I want

来自 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"/>;
));

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

【参考方案1】：

我终于放弃并使用了widthDocs，我因此而避免使用https://github.com/tuchk4/storybook-readme/issues/43。

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