为何TSX文件将条件判断识别为普通文本？如何正确使用if-else

在TSX（JSX的TypeScript版本）里，直接把if-else语句写在JSX标签内部会被当成普通文本——因为JSX只识别{}包裹的JavaScript表达式。针对你需要判断mylists.Title是否等于'Documents'并返回不同<span>的需求，有几种常用的正确实现方式：

1. 组件内部提前处理逻辑，赋值给变量 #

把if-else逻辑写在组件函数的JS部分，将渲染结果赋值给变量，再在JSX中引用这个变量：

function ListComponent({ mylists }) {
  let displayContent;
  // 用可选链避免mylists为空时报错
  if (mylists?.Title === 'Documents') {
    displayContent = <span>当前是Documents列表</span>;
  } else {
    displayContent = <span>当前是其他类型列表</span>;
  }

  return <div>{displayContent}</div>;
}

2. 三元运算符嵌入JSX #

对于简单的二选一判断，直接用三元运算符嵌入{}中，这是TSX里最常用的短条件渲染方式：

function ListComponent({ mylists }) {
  return (
    <div>
      {mylists?.Title === 'Documents' ? (
        <span>当前是Documents列表</span>
      ) : (
        <span>当前是其他类型列表</span>
      )}
    </div>
  );
}

这种方式适合逻辑简单的场景，代码更紧凑，直接在JSX中完成判断。

3. 逻辑与运算符（适用于单条件渲染） #

如果只需要在条件满足时渲染元素，不满足时什么都不渲染，可以用&&运算符：

function ListComponent({ mylists }) {
  return (
    <div>
      {mylists?.Title === 'Documents' && <span>当前是Documents列表</span>}
    </div>
  );
}

不过这种方式不适合你的需求（需要else返回另一个<span>），仅作为扩展知识点参考。

关键注意点 #

• 所有需要执行的JavaScript逻辑必须放在{}包裹的区域内；
• 不要在JSX标签内部直接写完整的if-else语句（比如<div>if(...) { ... } else { ... }</div>），这种写法会被解析成纯文本；
• 处理可能的空值：如果mylists可能不存在，一定要用可选链?.或者提前做非空判断，避免运行时错误。

内容的提问来源于stack exchange，提问作者kmurali krishna