我正在尝试使用自定义组件创建样式指南。我需要能够在彼此内部插入组件,并且不确定如何在.md文件内部进行插入。我有一个清单和清单项目。我想在列表中显示列表项。在styleguidist显示中出现此错误。这里有一些很好的例子,但没有一个例子说明我要完成的工作-https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components
SyntaxError:意外令牌(3:0) 1:从“ ./ListItem”导入ListItem 2: 3:
List.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
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
答案 0 :(得分:4)
也许MDX有帮助。
“ MDX是一种可授权的格式,可让您在Markdown文档中无缝编写JSX”
yarn add mdx.macro
将List.md重命名为List.mdx,现在您可以像这样
import ListItem from './ListItem'
#Header
<List>
<ListItem>
*content*
</ListItem>
</List>
答案 1 :(得分:2)
我不得不将.md更改为这种格式,并且可以正常工作,特别是添加了分号。
```jsx
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
<Placeholder />
</Button>
```