imports
import {Loading} from 'react-gm';

react-markdown-it-loader

用Markdown提供一份直观的React文档，有可运行的示例，有示例源代码，有示例的说明。

这样用户看起来直观，编写者写起来也直观，维护成本低。

经过几番尝试，结合 React 的特点。写了一套处理 Markdown 文件的 webpack loader，可以将 Markdown 转成 React 文件。

本md对应生成的文档是readme.md

Install

npm install react-markdown-it-loader

在 webpack 中加入 loader

{
    test: /\.md$/,
    loader: 'babel!react-markdown-it-loader'
}

随后把md文件当成一个react component去使用即可。比如本工程中的demo

import ReadMe from '../README.md';

如需运行demo npm install; npm start; 打开 http://localhost:5000

options

className 默认'doc'，页面容器的class

// webpack.config.js
module.export = {
    //...省略
    markdownItReact: function () {
        return {
            className: 'doc' // 默认也是doc
        };
    }
};

具体见webpack.config.js

样式

提供样式文件index.css，可直接引入或自定义。

语法介绍

正常的Markdown语法不影响。有几个需要注意的地方：

使用示例

纯渲染

::: demo 这是描述这是描述，点三角可展开代码。也可以不提供

<button onClick={() => alert('dou la mi fa sou')}>click me</button>

:::

    ::: demo 这是描述这是**描述**，点三角可展开代码
    ```jsx
    <button>adfasdfa</button>
    ```
    :::

注意：渲染到页面的代码语言必须写jsx，因为loaders会把语言为jsx放入render的jsx内

引入其他库

::: demo react-gm的Loading组件

<Loading/>

:::

在md开头添加引入库

---
imports:
    import {Loading} from 'react-gm';
---

然后

    ::: demo [react-gm](https://github.com/gmfe/react-gm)的日历组件
    ```jsx
    <Loading/>
    ```
    :::

更丰富的交互

比如需要 state，需要handleXXX

::: demo 更丰富的交互写在js内，这种场景更多

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'hello'
        };
    }
    handleChange(e){
        this.setState({value: e.target.value});
    }
    render(){
        return (<input value={this.state.value} onChange={::this.handleChange} />)
    }
}

<Test/>

:::

    ::: demo 更丰富的交互写在js内，这种场景更多
    ```js
    class Test extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                value: 'hello'
            };
        }
        handleChange(e){
            this.setState({value: e.target.value});
        }
        render(){
            return (<input value={this.state.value} onChange={::this.handleChange} />)
        }
    }
    ```
    ```jsx
    <Test/>
    ```
    :::

花括号 (表达式）

有意思的是可以用花括号写表达式，比如我要显示

当前url是：{location.href}

userAgent是：{navigator.userAgent}

因而你要用花括号时{'{}'}需要写成{'{\'{}\'}'}

代码里面的花括号

{'{ }'}会自动转，无需关注

<div>{location.href}</div>

参考

其他

anchor

github page是不支持browserHistory的，一般路由用hash处理。而锚点也是用hash，会冲突。所以只能自己处理。监听锚的点击，阻止默认事件，然后用你自己的规则处理吧。

我是这样做的 https://github.com/gmfe/react-gm/blob/master/demo/index.js

react模块

默认已经import React from 'react';

table

Header1	Header2
cell1	cell2

adamantg / react-markdown-it-loader Goto Github PK