概述
在开发前端应用中，我们经常使用 React 进行视图渲染。在编写 React 组件的过程中，我们通常会使用 JSX 语法来描述组件的结构和样式。然而，有些时候我们需要在兼容性较差的浏览器中运行我们的代码。这时候，我们就需要将 JSX 语法转换为兼容性更好的语法。这时候可以使用 babel-plugin-transform-react-jsx-compat 这个 npm 包。
安装
安装 babel-plugin-transform-react-jsx-compat 包，可以使用 npm 命令进行安装，如下所示：
npm install babel-plugin-transform-react-jsx-compat --save-dev
配置
安装完成后，在 .babelrc 文件中进行配置，如下所示：
-- -------------------- ---- -------
-
---------- -
-
------------------------------------------
-
---------- -
----- ---
-
-
-
-
-上面的配置表示，使用 babel-plugin-transform-react-jsx-compat 插件，对 JSX 语法进行转换，兼容性的目标为 IE8 及以上版本。
例子
下面，我们来看一个使用 babel-plugin-transform-react-jsx-compat 进行转换的例子。
-- -------------------- ---- -------
------ ----- ---- -------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
-
-
-
------ ------- ---上面的代码中，我们使用了 JSX 语法来声明一个组件。在使用 babel-plugin-transform-react-jsx-compat 进行转换之后，代码将变为：
-- -------------------- ---- -------
------ ----- ---- -------
----- --- ------- --------------- -
-------- -
------ --------------------
------
-----
--------------------
-----
-----
------- -------
-
--
-
-
------ ------- ---我们可以看到，原本的 JSX 代码被转换为了 React.createElement() 函数调用的形式，以达到更好的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb94b5cbfe1ea061262f