1.0.3 • Published 3 years ago
react-preview-component v1.0.3
安装
npm i react-preview-component -S更新记录
v.1.0.3 2021-09-30
支持 less 样式解析
引入
import ReactPreview from 'react-preview-component';API
| 属性名 | 含义 | 类型 | 是否必传 | 默认值 |
|---|---|---|---|---|
| code | 代码内容 | string | 是 | - |
| scope | 作用域对象 | Object | 否 | {} |
| errorSourceCode | 报错时是否在控制台输出错误代码 | Boolean | 否 | false |
| styleIdPre | 动态代码 style ID 前缀 | string | 否 | - |
示例
code 必须返回一个函数，参考 react hooks 函数式组件 默认作用域默认为空，scope 传入后可在 code 中直接使用。代码默认会转为 ES5
import React from 'react';
import ReactPreview from 'react-preview-component';
export default () => {
return (
<ReactPreview
code={`
return () => {
const { useState } = React;
const [text, setText] = useState('zlinhui');
return <div className="cus-wrapper">{name}</div>;
}
<style>
.cus-wrapper {
position: relative;
width: 100%;
}
</style>
`}
scope={{ React }}
/>
);
};