时间戳

首页 > 解决方案 > 在 React 渲染函数中隐藏/显示组件的逻辑和模式

javascript - 在 React 渲染函数中隐藏/显示组件的逻辑和模式

问题描述

在阅读了相当多的 React 代码之后，我开始注意到这种在 React 渲染方法中切换组件渲染的模式。

{ CONDITION && <Component /> }

这对我来说意义不大。要么这不是一个合乎逻辑的，而是完全是另一个运算符；在那种情况下，为什么没有其他 && 呢？或者它是一个逻辑和，如果第一个子句为真，惰性评估仅评估（呈现）第二个子句。如果是这种情况，那感觉就像我们不应该使用的丑陋黑客。

该语法是什么意思，背后的原因是什么？

编辑：

从答案中可以清楚地看出这是一个逻辑合取操作。它之所以有效，是因为惰性评估在 JS 中的工作方式。并且使用它是因为它比替代品更实用。

这对我来说仍然非常不满意。至少在我的世界里，一个明确定义为 AND(定义) 的操作不应该因为延迟加载而改变定义（这是因为性能和性能本身）。我猜 Javascript 到处都有这些不一致的地方。

标签： javascriptreactjssyntax

解决方案

A && B评估为：

  • B, 如果A是真实的, 或
  • A否则。

如果您尝试在 React 中渲染值falseor null，undefined则不会渲染任何内容。

因此，{ CONDITION && <Component /> }如果CONDITION是假的，要么不渲染，要么不渲染<Component />。

我能想到使用这种语法的一个原因是它{ ... }需要包含一个表达式，并且if-else是一个语句。您可以if-else在要渲染的 JSX 外部使用并返回一个或另一个组件（这也是一种常见的方法），但如果您需要在内部某处有条件地渲染某些内容，则不能这样做。

推荐阅读