我如何在 React 中使用条件渲染

如果使用得当，条件渲染是一个非常有用的 React 概念。您可以根据是否满足某些条件来决定要渲染哪些组件，或者可能完全忽略一个组件。我将举例说明我在本文中如何使用它。

如果您的 UI 元素只想在特定上下文中显示，请使用条件渲染

  **三元运算符的使用手册** ...  
 { **一些条件？** (  
 <SomeComponent />  
 ) **：** (  
 <SomeOtherComponent />  
 )}  
 ...

因此，UI 显示 <SomeComponent /> 如果 一些条件 是 真的 ，否则， <SomeOtherComponent /> 出现。

当然，您不仅限于使用源自 一些条件 你可以使用 如果 之前 返回 , 或合乎逻辑的 && 操作员在这种情况下也是如此！

现在让我们看一些具体的例子：

用户管理

在与用户合作时，这个概念是必不可少的。在您的应用程序中必须有一个点，您希望将特定 UI 元素的可见性限制为仅对登录用户可见，而不是仅对正在浏览的用户可见。

  **带有用户管理的条件渲染** 返回 （  
 { **道具.用户？** (  
 <UserDetails name={props.user.name} email={props.user.email} />  
 ) **：** (  
 <Button>免费注册</button>  
 )}  
 )

电子商务

您也可以在电子商务世界中使用这些知识。

  **在您的电子商务应用购物车中使用它** 返回 （  
 { **props.cart.items.length > 0 ？** (  
 <CartItems items={props.cart.items} />  
 ) **：** (  
 <Button>查看我们的产品</button>  
 )}  
 )

组件中缺少数据

另一种使用条件渲染的典型方法是让组件返回一个空的 JSX。这种技术有助于防止 UI 显示只有填充和背景的空组件。

  **缺少特定字段时提前返回空 JSX** **if (!props.title && !props.description) 返回 <></>** 返回 （  
 <div className='container'>  
 ...  
 </div>  
 )

我希望你发现这对你寻找新的学习材料很有用。感谢您抽出时间来阅读！如果您以后想阅读更多这样的故事，请订阅我的电子邮件列表！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39464/46052611