0.0.9 • Published 3 years ago
@race-ui/react-live v0.0.9
@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 | 外部控制编辑代码 |