@race-ui/react-live 说明文档

支持静态react代码，在线编辑与运行。 具体细节请查看 examples

安装

npm install @race-ui/react-live --save

# 其他依赖安装
npm install @babel/standalone codemirror react-codemirror2 acorn escodegen --save

引入

import ReactLive from '@race-ui/react-live';

import '@race-ui/react-live/assets/index.css';

写法

const Code = `
  class Demo extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        value: 'Hello11331!'
      }
      this.handleChange = this.handleChange.bind(this)
    }
    // name
    handleChange(event) {
      this.setState({ value: event.target.value });
    }
    render() {
      var value = this.state.value;
      return (
        <div>
          <h1>Hello this is a Online Editor</h1>
          <input type="text" value={value} onChange={this.handleChange} />
          <p>{value}</p>
        </div>
      );
    }
  }
  ReactDOM.render(<Demo />, mountNode);
`;

ReactDOM.render(<ReactLive code={Code} />, mountNode);

API

| 属性 | 默认值 | 参数类型 | 用法说明 | | ------ | ------ | ------ | ------ | | code | 必传 | string | 执行的react代码字符串 | | className | - | string | 该组件样式 | | defaultShowType | 'All' | ShowType（'All','Code','Preview'） | UI显示情况（'All': code与运行结果都显示， ‘Code’: 只显示code, 'Preview': 只显示渲染的UI） | | scope | 'React', 'ReactDOM', 'mountNode' | ReactLiveScope | 执行code中的方法、组件等变量 | | onChange | - | (currentCode: string) => void | 外部控制编辑代码 |