时间戳

首页 > 解决方案 > 如何将我的 JSX 代码转换为 JS 对象？

javascript - 如何将我的 JSX 代码转换为 JS 对象？

问题描述

我想从头开始创建我的 React 版本，但每本手册都说：“所以我们就这样在 JSX 上编写并使用将我们的代码转换成 JS 的 babel”。我想了解这个魔法是如何工作的。我的意思是这样的：

const div = <div id='JSX'> Example </div>

变成这样：

div = ('div', {id='JSX'}, 'Example');

我看到它是这样的：

function convertor(div){
  //code 
  return ObjectRepresentationOfDiv
}

但是如何在没有 "SyntaxError: Unexpected token <" 的情况下将参数传递给转换器函数？

标签： javascriptjsxbabeljs

解决方案

魔术通常通过带有 babel 插件的 webpack 发生。

分享您的 webpack.config.js 以查看其中的内容，如果您希望启动并运行它。

以下文档可能是您要阅读的内容：

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/

如果您想更深入地了解，可以在这里找到源代码。

https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-react-jsx/src/index.js

推荐阅读