使用Babel.transform 转换 jsx代码为js代码并执行

最新推荐文章于 2024-07-04 08:00:00 发布

zhongshizhi91

最新推荐文章于 2024-07-04 08:00:00 发布

阅读量1.5k

点赞数

分类专栏： React 低代码文章标签： React ReactDOM Babel Ant Design JSX

本文链接：https://blog.csdn.net/shuxiaoxii/article/details/118905911

版权

React 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

低代码

2 篇文章 0 订阅

订阅专栏

<!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>

页面效果

执行后的效果

zhongshizhi91

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用Babel.transform 转换 jsx代码为js代码并执行

<!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" /> <titl
复制链接

扫一扫

专栏目录