react-interpreter
React 沙盒 📦,可理解为 React 版的 eval()
。该沙盒运行机制可使基于 React 实现的小程序框架「如 Taro3 等」拥有 🚀 热更新能力。
安装
npm install react-interpreter --save
或者
yarn add react-interpreter --save
API
ReactInterpreter
- React 沙盒组件
-
Props
-
code
React 沙盒运行的代码字符串
⚠️ PS: React 沙盒组件运行的字符串代码只支持 es5,也不支持 jsx。可以先通过
babel 进行转换
import { ReactInterpreter } from 'react-interpreter'
import { View, Text } from '@tarojs/components'
const codeString = `function MyComp() {
return React.createElement(
View,
{
style: {
backgroundColor: '#00C28E',
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
},
React.createElement(Text, null, 'Hello World !')
)
}`
const MyComp = () => (
<ReactInterpreter
code={codeString}
componentMap={{
View,
Text,
}}
></ReactInterpreter>
)
-
效果图
-
globalObject
需要注入沙盒中的全局变量
globalObject = {
wx,
console
}
-
componentMap
需要注入沙盒中的 React 组件
import { View } from '@tarojs/components'
componentMap={
View
}
-
globalObjectComplexPropLevel
默认值:3
设置被注入的全局变量的复杂属性最大层级。为了保证转化效率,大于该层级的任何不能 JSON.stringify 的内容都会被丢弃掉「如 function 和出现循环引用的 object 等」。
-
实例
-
import { ReactInterpreter } from 'react-interpreter'
import Taro from '@tarojs/taro'
import * as taroComponents from '@tarojs/components'
const codeString = `
function MyReactInterpreterComp() {
return /*#__PURE__*/ React.createElement(
View,
{
style: {
backgroundColor: "pink",
height: "100vh",
display: "flex",
alignItems: "center"
}
},
/*#__PURE__*/ React.createElement(
Button,
{
style: {
backgroundColor: "blue",
color: "#FFFFFF"
},
onClick: function onClick() {
Taro.showToast({
icon: "none",
title: "😂😂😂"
});
}
},
"Click Me!"
)
);
}
`
const MyComponent = () => {
return (
<ReactInterpreter
// globalObject: 可设置沙盒内全局变量
// 把 Taro 对象注入到沙盒中,有需要也可以把 wx 对象注入
globalObject={{
Taro,
}}
// componentMap: 接收真实的组件定义
// 这里注入全部 @tarojs/components,可以根据实际情况选择部分注入
componentMap={taroComponents}
// code: 需要运行的组件代码
// 只支持 es5,如果代码包含 jsx 和 es6,可先通过 babel 进行转换
code={codeString}
/>
)
}
Taro3 中用法示例效果图
JSInterpreter
- JS 沙盒
如果只需要执行 JS ,可直接使用 JSInterpreter
灵感来源