如何在React TSX组件render方法中添加条件转换SP列表模板名称

你遇到的核心问题是JSX语法不允许直接在元素中插入if语句块——JSX只支持在{}内写入表达式，而if属于流程控制语句，不是表达式，所以会被当成字符串解析导致报错。下面提供几种简洁可行的实现方式：

方法一：使用映射对象（推荐，适合多模板场景） #

把模板编号和友好名称的对应关系集中在一个对象里，后续维护和扩展都很方便：

public render(): React.ReactElement<IGetSpListsProps> {
  // 定义模板编号与友好名称的映射表
  const templateMap: {[key: string]: string} = {
    '101': '文档库模板',
    '100': '通用列表',
    '103': '图片库',
    '104': '文档模板',
    // 可根据需求继续添加其他模板映射
  };

  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => (
          <li key={mylistitemkey}>
            <span>{mylists.Title}</span>
            {/* 从映射表取名称，不存在则显示"未知模板+编号" */}
            <span>{templateMap[mylists.BaseTemplate] || `未知模板(${mylists.BaseTemplate})`}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

方法二：三元运算符（适合简单判断场景） #

如果只需要处理少数几个模板编号，用三元运算符更直接：

public render(): React.ReactElement<IGetSpListsProps> {
  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => (
          <li key={mylistitemkey}>
            <span>{mylists.Title}</span>
            <span>
              {mylists.BaseTemplate === '101' 
                ? '文档库模板' 
                : mylists.BaseTemplate === '100' 
                  ? '通用列表' 
                  : `未知模板(${mylists.BaseTemplate})`}
            </span>
          </li>
        ))}
      </ol>
    </div>
  );
}

方法三：提取单独函数（适合复杂逻辑场景） #

如果模板判断还有额外逻辑（比如根据其他字段调整名称），可以把逻辑抽成单独函数：

// 封装模板名称转换逻辑
private getFriendlyTemplateName(templateId: string): string {
  switch(templateId) {
    case '101':
      return '文档库模板';
    case '100':
      return '通用列表';
    case '103':
      return '图片库';
    default:
      return `未知模板(${templateId})`;
  }
}

public render(): React.ReactElement<IGetSpListsProps> {
  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => (
          <li key={mylistitemkey}>
            <span>{mylists.Title}</span>
            <span>{this.getFriendlyTemplateName(mylists.BaseTemplate)}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

错误说明 #

你之前的写法里，if({mylists.BaseTemplate}= {'101'})不仅违反了JSX语法，还把赋值运算符=当成了相等判断===，即使放在{}里也会报错，一定要注意区分。

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