为什么

React组件化的开发思维，大大地缩减了我们的开发时间。 于此同时也带来了一些问题：

  1. 大量组件的维护和兼容问题

  2. 对于组件的学习使用，需要组件Demo展示

  3. ...

对于第二点问题，Demo 的书写可能不能够对组件覆盖全面 甚至需要深入查看组件源码才能明白配置项的功能

解决方案

React-Live

demo

写法

import {
    LiveProvider,
    LiveEditor,
    LiveError,
    LivePreview
} from 'react-live'
import Button from './Button'
import {h, c} from '@befe/utils/wrapper/erp'

class App extends Component {
    render() {
        return (
            <LiveProvider
                // 需要注入的数据
                scope={{
                    h,
                    type: 'primary',
                    Button,
                }}
                code={`
                    h(Button, {
                        type,
                        loading: true,
                        onClick: (e) => {console.log('click ')}
                    }, type)
                `}>
                    <LiveEditor />
                    <LiveError />
                    <LivePreview />
                </LiveProvider>
            )
        )
    }
}

React-Editable

具体效果看视频