如何在 React 中为 styleguidist 渲染 .md 文件中的两个组件？答案

【问题标题】：How to render two components inside a .md file for styleguidist in React?如何在 React 中为 styleguidist 渲染 .md 文件中的两个组件？
【发布时间】：2019-11-19 00:24:25
【问题描述】：

我正在尝试使用自定义组件创建样式指南。我需要能够在彼此内部插入组件，但不确定如何在 .md 文件中执行此操作。我有一个列表和列表项。我想在列表中显示列表项。在 styleguidist 显示中出现此错误。这里有一些很好的例子，但没有一个能说明我想要完成的事情——https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components

SyntaxError：意外的标记 (3:0) 1：从'./ListItem'导入ListItem 2： 3：

列表.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class List extends Component<IListProps> {
      render() {
        const { children } = this.props
        return <ul className={'mtm-list'}>{children}</ul>
      }
    }

    export default List

列表.md


    ```js
    import ListItem from './ListItem'

    <List>
       <ListItem> 
           Content in a List
       </ListItem>
    </List>

ListItem.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListItemProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class ListItem extends Component<IListItemProps> {
      render() {
        const { children } = this.props
        return <li className={'mtm-list-item'}>{children}</li>
      }
    }

    export default ListItem

【问题讨论】：

您是否尝试运行存储在降价文件中的 javascript？我不确定你会找到一个简单的解决方案。我建议将您的内容自然地呈现为 HTML，然后使用 HTML 到 Markdown 转换器。
我建议尝试 .mdx 文件类型（想想 Markdown 文件中的 .jsx）-github.com/mdx-js/mdx
更新了我的帖子。添加了关于我使用 md 文件的原因的参考。

标签： javascript reactjs react-styleguidist

【解决方案1】：

也许MDX 有帮助。

“MDX 是一种可创作的格式，可让您在 Markdown 文档中无缝编写 JSX”

yarn add mdx.macro

将 List.md 重命名为 List.mdx，现在您可以这样做

    import ListItem from './ListItem'
#Header
    <List>
       <ListItem> 
           *content*
       </ListItem>
    </List>

【讨论】：

很遗憾，这与 Styleguidist 不兼容

【解决方案2】：

我不得不将 .md 更改为这种格式并且它起作用了，特别是添加了分号。

```jsx
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
  <Placeholder />
</Button>
```

【讨论】：

是的，你需要分号。