是否可以将ReactJs JS（Virtual DOM）转换为JSX？即）ES5至ES6

Question

我使用虚拟DOM方法完成了reactjs脚本。现在我需要将其转换为JSX格式。是否有任何工具或插件可用于此转换。

示例：

发件人

var profile = React.createElement("div", null, 
 React.createElement("img", { src: "avatar.png", className: "profile" }),
 React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

以

var profile = <div>
 <img src="avatar.png" className="profile" />
 <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

注意：Babel官方网站正在将JSX转换为JS。

Answer 1

检查react-codemod。

该软件包包含一个名为create-element-to-jsx的脚本，可将.createElement次调用转换为jsx元素。

您可以像这样使用它（引用链接）：

jscodeshift -t react-codemod/transforms/create-element-to-jsx.js <path>