React 是一款流行的 JavaScript 库，用于构建交互式用户界面。React 的主要目标是简化 UI 开发过程，并提高应用的性能和可维护性。条件渲染是 React 中的一个重要概念，通过它我们可以根据组件状态来决定渲染何种内容。
条件渲染的用途
条件渲染可以使应用程序更加动态，并根据不同的状态选择性地呈现不同的内容。条件渲染在以下情况下很有用：
- 当应用程序需要根据用户输入、数据模型、组件状态等来动态地更改呈现的内容时，条件渲染可以为开发人员提供方便和控制。
- 当不同的页面需要根据不同的用户角色、设备、应用程序状态等来呈现不同的内容时，条件渲染可以帮助我们实现该功能。
if-else 语句和条件运算符
在 React 中，我们可以使用 if-else 语句或条件运算符来进行条件渲染。
if-else 语句
if-else 语句是一种常见的条件语句，在 React 中也可以使用。下面是一个例子：
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}在上述例子中，我们使用 if-else 语句根据用户的登录状态呈现不同的问候语。
条件运算符
条件运算符也称为三元运算符，是 JavaScript 中的一种简单的条件语句。在 React 中，使用条件运算符进行条件渲染看起来更加简洁。下面是一个例子：
-- -------------------- ---- -------
-------- --------------- -
----- ---------- - -----------------
------ -
-----
----------- - -
----------- ----------
- - -
---------- ---- --------
--
------
--
-在上述例子中，我们使用条件运算符根据用户的登录状态呈现不同的问候语。
防止组件渲染
在某些情况下，我们不想在组件中呈现任何内容。在这种情况下，我们可以将组件的渲染结果设置为 null。
function SomeComponent(props) {
const shouldRender = props.shouldRender;
return shouldRender ? <div>Hello!</div> : null;
}在上述代码中，如果 shouldRender 的值为 false，则 SomeComponent 不会呈现任何内容。
总结
在 React 中，条件渲染可以根据组件状态或 props 动态地选择要呈现的内容。我们可以使用 if-else 语句或条件运算符进行条件渲染，也可以使用 null 防止组件的渲染。条件渲染可以使应用程序更加动态，并在需要时根据不同的状态呈现不同的内容。记住，只要控制好条件渲染的逻辑，就可以创建出优秀的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517a90e95b1f8cacdfd45a3