在 React 的开发过程中，我们常常需要在 JSX 表达式中使用 if...else、for 循环等控制流语句，但是在 JSX 语法中，这些语句并不被支持。为了解决这个问题，可以使用 npm 包 jsx-control-statements。
安装
使用 npm 安装 jsx-control-statements：
npm install --save jsx-control-statements
使用
安装 jsx-control-statements 之后，需要在 webpack 配置文件中添加 babel 插件以支持这个包。在 babel-loader 的 options 中加入 transform-jsx-control-statements。示例：
-- -------------------- ---- -------
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
-
----------------------------------
-
------------ -----
--
--
-------------------------------------
--
--
--
-添加完成后即可在 JSX 中使用控制流语句了，这里提供一些常用语法的示例。
if...else
-- -------------------- ---- -------
------ ----- ---- --------
------ -- ---- --------------------------------
----- ----------- ------- --------------- -
-------- -
----- ----- - -----------------
------ -
-----
--- ----------------------- --- --------
------------
-----
--- ----------------------- --- ----------
------------
-----
--- ----------------------- --- ------------
------------
-----
------
--
-
-for 循环
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- ---------------------------------
----- --------- ------- --------------- -
-------- -
----- ------ - ------------------
------ -
----
----
-----------
--------------- ------ -- --- -------------------------------
--
-----
--
-
-switch...case
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------------------------
------ ---- ---- ----------------------------------
------ ------- ---- -------------------------------------
----- ----------- ------- --------------- -
-------- -
----- ----- - -----------------
------ -
-----
--------
----- ----------------------- --- --------
------------
-------
----- ----------------------- --- ----------
------------
-------
---------
-------------
----------
---------
------
--
-
-总结
npm 包 jsx-control-statements 提供了对 JSX 控制流语句的支持，使用起来非常方便，可以让我们的代码更加简洁易读。在使用过程中，需要注意 webpack 和 babel 的配置，可以根据自己的需求进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161262