html元素的React Js条件渲染未按预期工作答案

【问题标题】：React Js conditional rendering of html element not working as expectedhtml元素的React Js条件渲染未按预期工作
【发布时间】：2020-11-13 04:28:15
【问题描述】：

我正在添加条件来显示 div 元素，条件有一个变量，该变量为 0，当它为 0 时，显示 0 而不是不显示任何内容。

使用功能组件：

return (
  <div>
    {flag1 && flag2 &&  data1 && data1.length && data2 && data2.length &&  (
      <div className="answers-heading">Answers ({data2.length})</div>
    )}
  </div>
);

在上面的代码中，我希望如果任何变量不正确，那么它应该根本不显示 div 元素，但我在 UI 中得到 0。当所有条件都为真时，它工作正常。我创建了stackblitz demo 来展示它是如何以意想不到的方式工作的。

任何帮助将不胜感激。

已经调试了一整天，但找不到原因。

【问题讨论】：

如果flag1 或flag2 的类型为number，则为预期。如果它们确实是只有 2 个有用值的标志，则应该使用 boolean 类型。
@Valentin flag1 和 flag2 是布尔值。在演示中，我将它们设为假。

标签： javascript reactjs

【解决方案1】：

return (
  <div>
    {flag1 && flag2 &&  data1 && data1.length && data2 && data2.length ?  (
      <div className="answers-heading">Answers ({data2.length})</div>
    ) : null}
  </div>
);

您应该开始使用三元而不是仅使用 && 运算符，您最终会得到内部呈现 0 的 div。你得到 0 因为&& 操作员检查基本上表明你的条件是“假的”。

顺便说一句，你的情况看起来不错，你也应该把它放到const 中。

这也可能对您有所帮助：React showing 0 instead of nothing with short-circuit (&&) conditional component

【讨论】：

【解决方案2】：

您的问题来自data1.length 或data2.length 等于0。它使您的条件解析为0，因为true && 0 === 0。

如果您想避免这种情况，您可以将代码更改为：

return (
  <div>
    {flag1 && flag2 && data1 && data1.length !== 0 && data2 && data2.length !== 0 && (
      <div className="answers-heading">Answers ({data2.length})</div>
    )}
  </div>
);

【讨论】：

【解决方案3】：

放！！在所有数值的前面，如果该数字存在且不为 0，则为 true

【讨论】：