<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./react/react.production.min.js"></script> <!-- react -->
<script src="./react/react-dom.production.min.js"></script> <!-- react-dom -->
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.js"></script> <!-- babel -->
<script src="./react/component/ant-dist/antd.js"></script>
<link href="./react/component/ant-dist/antd.css" rel="stylesheet" />
<script type="text/javascript">
const str = ` const a = [
{ key: "1", value: "zhong" },
{ key: "2", value: "shizhi" },
];
let doms = [];
for (let item of a) {
doms.push(<div key={item.key}>{item.value}</div>);
}
const { Button } = antd;
const Dom = (
<div>
{doms} <Button type='primary'>按钮</Button>
</div>
);
ReactDOM.render(Dom, document.getElementById("root"))`; // jsx 代码字符串
let { code } = window.Babel.transform(str, { presets: ['es2015', 'react'] }); // 编译 jsx字符串代码为 js字符串代码
let functionReactJsx = new Function(code); // 定义代码执行函数
functionReactJsx(); // 执行代码
</script>
</body>
</html>
使用Babel.transform 转换 jsx代码为js代码并执行
最新推荐文章于 2024-07-04 08:00:00 发布