我如何在 React 中使用条件渲染
我如何在 React 中使用条件渲染
如果使用得当，条件渲染是一个非常有用的 React 概念。您可以根据是否满足某些条件来决定要渲染哪些组件，或者可能完全忽略一个组件。我将举例说明我在本文中如何使用它。
如果您的 UI 元素只想在特定上下文中显示，请使用条件渲染
三元运算符的使用手册 ...
{ 一些条件？ (
) ： (
)}
...
因此，UI 显示 <SomeComponent /> 如果 一些条件 是 真的 ，否则， <SomeOtherComponent /> 出现。
当然，您不仅限于使用源自 一些条件 你可以使用 如果 之前 返回 , 或合乎逻辑的 && 操作员在这种情况下也是如此！
现在让我们看一些具体的例子：
用户管理
在与用户合作时，这个概念是必不可少的。在您的应用程序中必须有一个点，您希望将特定 UI 元素的可见性限制为仅对登录用户可见，而不是仅对正在浏览的用户可见。
带有用户管理的条件渲染 返回 （
{ 道具.用户？ (
) ： (
)}
)
电子商务
您也可以在电子商务世界中使用这些知识。
在您的电子商务应用购物车中使用它 返回 （
{ props.cart.items.length > 0 ？ (
) ： (
)}
)
组件中缺少数据
另一种使用条件渲染的典型方法是让组件返回一个空的 JSX。这种技术有助于防止 UI 显示只有填充和背景的空组件。
缺少特定字段时提前返回空 JSX if (!props.title && !props.description) 返回 <></> 返回 （
...
)
我希望你发现这对你寻找新的学习材料很有用。感谢您抽出时间来阅读！如果您以后想阅读更多这样的故事，请订阅我的电子邮件列表！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号