反应如何检查字符串是否为空

Question

我在 React 中有一个组件，它显示来自 JSON 数据文件的时间：

<div>
  <div>
    {startTime && (
      <div className={style.startTime}>
        {moment(stop?.on?.time).format("HH:mm:ss")}
      </div>
    )}
    {endTime && (
      <div className={style.endTime}>
        {moment(stop?.off?.time).format("HH:mm:ss")}
      </div>
    )}
  </div>

</div>;

这可以很好地显示文件中的时间。 但是，现在我正在尝试编写一个三元组，如果 JSON 文件中没有数据，它将隐藏时间。

<div>
  <div>
    {startTime === true
      ? startTime && <div>{moment(stop?.on?.time).format("HH:mm:ss")}</div>
      : null}

    {endTime === true
      ? endTime && <div>{moment(stop?.off?.time).format("HH:mm:ss")}</div>
      : null}
  </div>
</div>;

这行不通。 如果条件为=== true ，则两者均不返回任何内容。 如果我将它设置为!== ，它会返回两个值。

如果 JSON object 存在并且有数据，我如何让它显示或隐藏值？

Answer 1

字符串永远不会等于 true

通过添加!!可以将字符串解析为 boolean 在前面。 如果字符串为空，则该值为false ，如果其中包含一些文本，则该true 。

<div>
  <div>
    {!!startTime
      ? startTime && <div>{moment(stop?.on?.time).format("HH:mm:ss")}</div>
      : null}

    {!!endTime
      ? endTime && <div>{moment(stop?.off?.time).format("HH:mm:ss")}</div>
      : null}
  </div>
</div>;