是否可以将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>