在 React 中，条件渲染是指根据一些条件决定显示或隐藏某些组件或元素。React 提供了多种方式来实现条件渲染，本文将分别介绍这些方式的优缺点及使用方法。
1. 使用 if-else 语句
最简单的条件渲染方式是使用 JavaScript 的 if-else 语句来判断是否渲染某个组件或元素。例如：
-------- --------------- -
-- ------------------ -
------ ----------- -----------
- ---- -
------ ---------- ---- ---------
-
-在上面的例子中，如果 props.isLoggedIn 为 true，则显示 "Welcome back!" 这个标题，否则显示 "Please sign up."。
虽然这种方式看起来简单易懂，但如果条件判断较多时代码会变得冗长，也不利于维护。
2. 使用三元运算符
当条件判断较少时，我们可以使用三元运算符来简化代码。例如：
-------- --------------- -
------ -
-----
----------------- - -
----------- ----------
- - -
---------- ---- --------
--
------
--
-在上面的例子中，通过三元运算符判断 props.isLoggedIn 的值，以决定渲染哪个标题。
这种方式比 if-else 语句简洁明了，但仍然不适合处理大量的条件判断。
3. 使用 && 运算符
当我们只需要根据一个条件来判断是否进行渲染时，可以使用 && 运算符。例如：
-------- --------------- - ------ ---------------- -- ----------- ----------- -
在上面的例子中，当 props.isLoggedIn 为 true 时，才会渲染 "Welcome back!" 这个标题。
这种方式可以更加简洁地实现条件渲染，但也有一定的局限性。
4. 使用 Switch 语句
当我们需要判断多个条件时，可以使用 JavaScript 的 Switch 语句来实现。例如：
-------- ---------------- -
------ ---------------- -
---- --------
------ ------ ------------------------
---- ----------
------ ------ --------------------------
---- -------------
------ ------ --------------------------
--------
------ -----
-
-在上面的例子中，根据不同的 props.userRole 值来渲染不同颜色的徽章（Badge）组件。
这种方式可以处理多个条件判断，但在需要判断的条件较多时，仍然不太便于维护。
5. 使用条件表达式
当我们需要根据某个条件来返回不同的组件或元素时，可以使用条件表达式来实现。例如：
-------- ------------- -
----- ---------- - --------------- - --------- - ------------
------ -
------- --------------- --------------------
---------------- - ----- - ------
---------
--
-在上面的例子中，根据 props.isPrimary 的值来定义按钮的样式类型和显示文本。
这种方式非常灵活，可以根据不同的条件返回不同的组件或元素，但需要一定的编程能力。
示例代码
下面是一个使用以上所有方式实现的示例代码：
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------
-------- ---------------- -
-- ------------------ -
------ ----------- -----------
- ---- -
------ ---------- ---- ---------
-
-
-------- ---------------- -
------ -
-----
----------------- - -
----------- ----------
- - -
---------- ---- --------
--
------
--
-
-------- ---------------- -
------ ---------------- -- ----------- -----------
-
-------- ---------------- -
------ ---------------- -
---- --------
------ ------ ------------------------
---- ----------
------ ------ --------------------------
---- -------------
------ ------ --------------------------
--------
------ -----
-
-
-------- ------------- -
----- ---------- - --------------- - --------- - ------------
------ -
------- --------------- --------------------
---------------- - ----- - ------
---------
--
-
-------- ----- -
------ -
-----
---------- ----------------- --
---------- ------------------ --
---------- ----------------- --
---------- ------------------ --
---------- ----------------- --
---------- ---------------- --
---------- ------------------ --
---------- --------------------- --
---------- ------------------- --
------- ---------------- --
------- ----------------- --
------
--
-
-------------------- --- ---------------------------------结论
以上是 React 中常用的条件渲染方式，我们可以根据实际需求选择适合自己的方式来进行开发。尽可能的简化代码，让我们的代码更加易读易维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671c67069babaf620fb09f3d