React渲染函数中用if-else/映射表实现模板编号转友好名称

问题描述 #

在React组件的render函数中，尝试根据mylists.BaseTemplate返回的数值（如101、102等），通过if-else条件判断输出对应的友好模板名称（如"通用列表模板"、"文档列表模板"），但当前代码中的if-else语句被当作普通文本渲染，未达到预期效果。咨询两个问题：

1. 如何在render函数中正确使用if-else条件判断实现需求？
2. 是否可以通过创建JSON映射文件来实现编号与友好名称的匹配？

当前尝试的代码：

public render(): React.ReactElement<IGetSpListsProps> {
return (
<div>
<ol>
{
this.state.sitecontents.map(function(mylists,mylistitemkey){
return(
<li>
  <span>{mylists.Title}</span> // 这里会显示列表标题
  
  if({mylists.BaseTemplate} = {'101'} // BaseTemplate会返回整数，比如100、101、103等，这里判断是否等于101
  {
    <p>{"通用列表模板"}</p>
  }
  else if ({mylists.BaseTemplate} = {'102'}) {
    <p>{"文档列表模板"}</p>
  } else {
    <p>{"自定义模板"}</p>
  })
  
  </li>);
  })
}</ol></div>
  );
}

问题1：正确在Render中使用if-else判断 #

你当前代码的核心问题：

• JSX仅支持表达式，直接写if-else语句会被当作文本渲染
• 条件判断误用了赋值符号=，应该用全等判断===（注意类型匹配：如果BaseTemplate是数字类型，直接和数字值比较，不要用字符串）

修正写法1：提前处理逻辑再返回JSX #

public render(): React.ReactElement<IGetSpListsProps> {
  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => {
          let templateName;
          // 根据BaseTemplate值匹配模板名称
          if (mylists.BaseTemplate === 101) {
            templateName = "通用列表模板";
          } else if (mylists.BaseTemplate === 102) {
            templateName = "文档列表模板";
          } else {
            templateName = "自定义模板";
          }
          return (
            <li key={mylistitemkey}>
              <span>{mylists.Title}</span>
              <p>{templateName}</p>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

修正写法2：使用三元表达式（适合简单条件） #

如果条件分支较少，可直接在JSX中嵌入三元表达式：

public render(): React.ReactElement<IGetSpListsProps> {
  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => (
          <li key={mylistitemkey}>
            <span>{mylists.Title}</span>
            <p>
              {mylists.BaseTemplate === 101
                ? "通用列表模板"
                : mylists.BaseTemplate === 102
                ? "文档列表模板"
                : "自定义模板"}
            </p>
          </li>
        ))}
      </ol>
    </div>
  );
}

问题2：使用JSON映射文件实现匹配 #

完全可以，这种方式更利于维护（尤其是模板类型增多时），逻辑与视图分离更清晰。

步骤1：创建映射文件（如templateMap.json） #

{
  "101": "通用列表模板",
  "102": "文档列表模板",
  "103": "任务列表模板",
  "default": "自定义模板"
}

注：如果BaseTemplate是数字类型，可将映射key改为数字；或在使用时将数值转为字符串匹配。

步骤2：在组件中引入并使用 #

import templateMap from './templateMap.json';

public render(): React.ReactElement<IGetSpListsProps> {
  return (
    <div>
      <ol>
        {this.state.sitecontents.map((mylists, mylistitemkey) => {
          // 将BaseTemplate转为字符串，匹配映射文件的key
          const templateKey = String(mylists.BaseTemplate);
          // 取对应名称，无匹配则用默认值
          const templateName = templateMap[templateKey] || templateMap.default;
          return (
            <li key={mylistitemkey}>
              <span>{mylists.Title}</span>
              <p>{templateName}</p>
            </li>
          );
        })}
      </ol>
    </div>
  );
}

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