React 是一种流行的前端框架，它使得构建复杂的用户界面变得更加容易。条件渲染是 React 开发中的一个重要部分，它允许根据特定的状态或属性显示或隐藏组件或元素。本文将介绍 React 中条件渲染的技巧，包括使用条件语句、三元运算符和逻辑与运算符等。
条件语句
在 React 中，我们可以使用条件语句来根据特定的状态或属性来渲染组件或元素。常见的条件语句包括 if、else 和 switch 等。下面是一个示例，它根据用户是否登录来显示不同的内容。
-- -------------------- ---- -------
-------- ----- -
----- ------------ -------------- - ----------------
------ -
-----
----------- - -
----------- ----------
- - -
------- ----------- -- ------------------------ -----------
--
------
--
-在这个示例中，我们使用 useState 钩子来保存用户是否登录的状态。当用户未登录时，我们渲染一个 Log in 按钮，当用户登录后，我们渲染一个欢迎消息。
三元运算符
三元运算符是一种简洁的条件渲染方式，它可以让我们在一行代码中进行条件判断。下面是一个示例，它根据用户是否喜欢 React 来显示文本。
-- -------------------- ---- -------
-------- ----- -
----- ----------- ------------- - ----------------
------ -
-----
------------- - -- ---- ------- - -- ----- ---- ------------
------- ----------- -- -----------------------------------------
------
--
-在这个示例中，我们使用 useState 钩子来保存用户是否喜欢 React 的状态。当用户喜欢 React 时，我们渲染 "I like React!"，否则，我们渲染 "I don't like React."。我们还添加了一个 Toggle 按钮，当用户点击它时，它会切换用户是否喜欢 React 的状态。
逻辑与运算符
逻辑与运算符是一种常见的条件渲染方式，它可以让我们根据多个条件来渲染组件或元素。下面是一个示例，它根据用户是否登录和是否具有管理员权限来显示不同的内容。
-- -------------------- ---- -------
-------- ----- -
----- ------------ -------------- - ----------------
----- --------- ----------- - ----------------
------ -
-----
----------- -- ------- - -
------------ -----------
- - ---------- - -
----------- ----------
- - -
------- ----------- -- ------------------------ -----------
--
------- ----------- -- ---------------------------- --------------
------
--
-在这个示例中，我们使用 useState 钩子来保存用户是否登录和是否具有管理员权限的状态。当用户既登录又具有管理员权限时，我们渲染一个欢迎管理员的消息，当用户仅登录时，我们渲染一个欢迎消息，否则，我们渲染一个 Log in 按钮。我们还添加了一个 Toggle admin 按钮，当用户点击它时，它会切换用户是否具有管理员权限的状态。
结论
在 React 开发中，条件渲染是一个非常常见的任务。本文介绍了 React 中条件渲染的技巧，包括使用条件语句、三元运算符和逻辑与运算符等。这些技巧可以帮助我们更加容易地根据特定的状态或属性来显示或隐藏组件或元素。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c35b0e5138b922280b3f8