React字符串为空判断及组件根据JSON数据显示时间的问题

我来帮你解决这两个React相关的问题：

在React里检查字符串是否为空，要根据你的具体需求来选择不同的方式：

• 检查纯空字符串：如果只需要判断字符串是否是''（完全没有字符），直接用严格相等判断即可：

  const str = '';
  const isEmpty = str === ''; // 返回true
  

• 检查包含空格的"空"字符串：如果用户输入了空格（比如' '）也需要视为空，那就先调用trim()去掉首尾空格再判断：

  const str = '   ';
  const isEmptyOrWhitespace = str.trim() === ''; // 返回true
  

• 覆盖null/undefined的情况：如果字符串变量可能是null或undefined，可以结合逻辑非操作符来覆盖所有空值场景：

  const str = null;
  const isEmptyValue = !str || str.trim() === ''; // 返回true
  

你的问题出在条件判断的逻辑上，先帮你分析下原因，再给出解决方案：

问题根源 #

你原来的代码startTime && (...)能正常工作，说明startTime是一个真值（truthy value）——可能是布尔值true，也可能是存在的对象/字符串等。但你改成startTime === true ? ... : null后，用了严格相等判断，如果startTime不是严格的布尔值true（比如它是stop?.on?.time本身，也就是一个时间字符串），那这个判断就会失败，导致时间不显示；而用!==时，所有真值都会满足条件，所以两个时间都显示。

正确的实现方式 #

你的核心需求是当JSON对象存在且有时间数据时显示，否则隐藏，最直接的方式是直接检查时间字段是否存在，不需要额外的startTime/endTime严格判断：

<div>
  <div>
    {/* 检查stop.on.time是否存在，存在就渲染开始时间 */}
    {stop?.on?.time && (
      <div className={style.startTime}>
        {moment(stop.on.time).format("HH:mm:ss")}
      </div>
    )}
    {/* 同理检查结束时间 */}
    {stop?.off?.time && (
      <div className={style.endTime}>
        {moment(stop.off.time).format("HH:mm:ss")}
      </div>
    )}
  </div>
</div>

如果你想保留startTime/endTime变量来简化判断，那要先把它们转成布尔值，再用简单的条件判断：

// 先把startTime/endTime转成布尔值，明确表示是否有数据
const startTime = !!stop?.on?.time;
const endTime = !!stop?.off?.time;

// 然后用三元表达式或直接逻辑与判断
<div>
  <div>
    {startTime ? (
      <div className={style.startTime}>
        {moment(stop.on.time).format("HH:mm:ss")}
      </div>
    ) : null}
    {endTime ? (
      <div className={style.endTime}>
        {moment(stop.off.time).format("HH:mm:ss")}
      </div>
    ) : null}
  </div>
</div>

这样就能精准实现“有数据显示，无数据隐藏”的效果了。

内容的提问来源于stack exchange，提问作者Noble Polygon