我如何在反应中显示md文件的内容以制作styleguidist库

时间:2019-05-11 18:16:00

标签: reactjs markdown

如何在我的react应用中显示.md文件的内容。

我有两个文件,一个md文件:

Basic AutoComplete Example:

```js
<AutoComplete style={{ width: 200 }} placeholder="input here"/>
```

和一个js文件

    import React from 'react'
    import {
      arrayOf,
      bool,
      element,
      func,
      object,
      string,
      shape,
      oneOfType
    } from 'prop-types'
    import { AutoComplete as AntAutoComplete, Input } from 'antd'

    function onSelect(value) {
      console.log('onSelect', value)
    }

    class AutoComplete extends React.Component {
      state = {
        dataSource: []
      }

      handleSearch = value => {
        this.setState({
          dataSource: !value ? [] : [value, value + value, value + value + value]
        })
      }

      render() {
        const { dataSource } = this.state
        return (
          <AntAutoComplete
            dataSource={dataSource}
            onSelect={onSelect}
            onSearch={this.handleSearch}
            {...this.props}
          />
        )
      }

export default AutoComplete

我想与styleguidist合作,制作一个antdesign库,但是没有描述如何包括这些组件的组件,这些组件已显示在应用程序中。

我试图在App.js中调用组件“ AutoComplete”,但它仅向我显示没有styleguidist框架的组件, 与本例不同:

https://newswim.github.io/styleguidist-ant-design/index.html

import React, { Component } from 'react'
import './App.css'
import 'antd/dist/antd.less'
import AutoComplete from './components/autocomplete'

    class App extends Component {
      render() {
        return (
          <div className="App">
            {/* <AutoComplete /> */}
            ```jsx
            <AutoComplete />
            ```
          </div>
    )
  }
}

export default App

0 个答案:

没有答案