React 是一款开源的前端应用框架，它使用组件化的方式极大地方便了前端开发，其中条件渲染是 React 中的常见用法。本文将介绍在 React 中如何使用条件渲染及常见的使用技巧，帮助读者更好地了解和使用 React。
条件渲染的概念
条件渲染是指根据特定条件选择性地显示或隐藏元素。在 React 中，条件渲染能完成许多任务，例如展示控制按钮、动画效果、错误处理等。React 提供了两种方式来实现条件渲染：
if/else 语句
可以使用 if/else 语句来判断组件是否应该渲染。下面是一个展示控制按钮的例子：
-- -------------------- ---- -------
-------- ------------------- -
-- ------------------ -
------ -
------- ----------------------------------------
--
-
------ -----
-
-------- ----- -
----- ------ -------- - ----------------
------ -
-----
------ --------------- -------------- ------------ -- --------------- --
------------- ----------------- ----------- -- ------------- ----------- --
------
--
-在例子中，我们定义了一个 ControlPanel 组件，它接收一个布尔值 showButton 和一个回调函数 onClick。在组件内部，我们使用 if/else 语句来判断 showButton 是否为真，如果为真就渲染一个按钮。
在父组件 App 中，我们使用 useState 创建一个状态变量 show，并在页面上展示一个复选框，用来控制是否展示控制按钮。当复选框被选中时，show 为真，控制按钮被展示，否则不被展示。
三元运算符
另一种实现条件渲染的方式是使用三元运算符，它是一种短语法 ? :。下面是一个在列表中添加/删除元素的例子：
-- -------------------- ---- -------
-------- ----------- -
------ -
----
--------------------- -- -
--- --------------
--------------
------- ----------- -- ----------------------------------------
-----
---
-----
--
-
-------- ----- -
----- ------- --------- - ----------
- --- -- -------- ------- --
- --- -- -------- -------- --
- --- -- -------- -------- --
---
------ -
-----
----- ------------- ------------ -- -------------------------- -- ------- --- ----- --
------------- --- - - ----- ----- ---------- - -----
------
--
-在例子中，我们定义了一个 List 组件和一个 App 组件。List 组件接收一个数组 items 和一个回调函数 onDelete，用来删除指定的元素。
在父组件 App 中，我们使用 useState 创建一个状态变量 items，并默认设置三个元素。我们在页面上展示 List 组件，并使用三元运算符来判断 items 是否为空，如果是就展示一个消息，否则不展示。
常见使用技巧
使用 && 运算符
当我们需要展示一段文本或者元素时，如果内容为空，我们可以使用 && 运算符来简化判断。例如下面的例子：
-- -------------------- ---- -------
-------- --------------- -
----- ---- - -----------
------ -
-----
----- -- ---------- -------------
------
--
-
-------- ----- -
------ -
-----
--------- ------------ --
--------- ------- --
------
--
-在例子中，我们定义了一个 Greeting 组件和一个 App 组件。Greeting 组件接收一个字符串 name，用来展示欢迎信息。我们在 Greeting 组件中使用 && 运算符来判断 name 是否为空，如果不为空就展示信息，否则不展示。
使用 switch 语句
当我们需要根据不同的状态渲染不同的组件时，可以使用 switch 语句来处理。例如下面的例子：
-- -------------------- ---- -------
-------- ----------- -
----- ------ - -------------
------ -------- -
---- ----------
------ -------------------
---- --------
------ ------------- ----------------------- ---
--------
------ -------- ---
-
-
-------- ----- -
----- -------- ---------- - --------------------
----- --------- ----------- - -------------
------------ -- -
-----------
-------- -- ---------------------
------------ -- -
-------------------
--------------------------
---
-- ----
------ -
-----
----- --------------- ----------------- --
------
--
-在例子中，我们定义了一个 Page 组件和一个 App 组件。Page 组件接收一个字符串 status 和一个字符串 message，根据不同的状态渲染不同的组件。在父组件 App 中，我们使用 useState 创建两个状态变量 status 和 message，并在 useEffect 中调用 fetchData 函数来获取数据，并根据结果更新状态变量。最后，在页面上展示 Page 组件。
总结
本文介绍了在 React 中使用条件渲染的常见用法和技巧，包括 if/else 语句、三元运算符、使用 && 运算符和 switch 语句。希望本文能帮助读者更好地理解和使用 React。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64759fe5968c7c53b02a2ecb