如何在Carbon React库的组件map函数中正确实现多条件分支渲染

嘿，我完全懂你碰到的问题——在JSX的map回调里直接写if语句确实行不通！因为JSX本质是React.createElement的语法糖，花括号里只能放表达式，而if是语句，没法直接嵌入执行，所以才会被当成无效内容处理。

先帮你捋下原代码里的几个小细节问题，再给你几种靠谱的解决方案：

• Working要加引号，不然会被当成变量（应该是"Working"）
• key的写法有语法错误（比如key={cell-${row.id}}`}多了个大括号）
• map参数是X，但key里用了row.id，应该统一成X.id或者换个更清晰的变量名比如item

方案1：把条件逻辑抽成单独函数（最推荐，多条件场景好维护） #

这种方式把渲染逻辑和JSX结构分开，代码可读性和可维护性都很高，适合你有多个判断条件的场景：

// 单独定义处理状态单元格的函数
const renderStatusCell = (item) => {
  // 第一个条件：包含"Working"时返回红色单元格
  if (item?.status.includes("Working")) {
    return (
      <StructuredListCell 
        key={`cell-${item.id}`} 
        noWrap 
        style={{ paddingBottom: '.5rem', color: 'red' }}
      >
        {item.status}
      </StructuredListCell>
    );
  }
  // 可以在这里加更多else if处理其他业务条件
  else if (item?.status.includes("Pending")) {
    return (
      <StructuredListCell 
        key={`cell-${item.id}`} 
        noWrap 
        style={{ paddingBottom: '.5rem', color: 'orange' }}
      >
        {item.status}
      </StructuredListCell>
    );
  }
  // 默认情况：返回黄色单元格
  else {
    return (
      <StructuredListCell 
        key={`cell-${item.id}`} 
        noWrap 
        style={{ paddingBottom: '.5rem', color: 'yellow' }}
      >
        {item.status}
      </StructuredListCell>
    );
  }
};

// 在组件里调用这个函数
<StructuredListBody>
  {matchingResults?.map((item, i) => (
    <StructuredListRow key={`row-${item.id}-${i}`}>
      {renderStatusCell(item)}
    </StructuredListRow>
  ))}
</StructuredListBody>

方案2：用立即执行函数（IIFE）嵌入条件逻辑 #

如果不想单独写函数，也可以用IIFE把if语句包裹成表达式，直接放在JSX里：

<StructuredListBody>
  {matchingResults?.map((item, i) => (
    <StructuredListRow key={`row-${item.id}-${i}`}>
      {(() => {
        if (item?.status.includes("Working")) {
          return (
            <StructuredListCell 
              key={`cell-${item.id}`} 
              noWrap 
              style={{ paddingBottom: '.5rem', color: 'red' }}
            >
              {item.status}
            </StructuredListCell>
          );
        } else {
          return (
            <StructuredListCell 
              key={`cell-${item.id}`} 
              noWrap 
              style={{ paddingBottom: '.5rem', color: 'yellow' }}
            >
              {item.status}
            </StructuredListCell>
          );
        }
      })()}
    </StructuredListRow>
  ))}
</StructuredListBody>

方案3：多条件三元运算符（适合条件不复杂的情况） #

如果条件层级不多，也可以用串联的三元运算符直接控制样式或内容，代码会更紧凑：

<StructuredListBody>
  {matchingResults?.map((item, i) => (
    <StructuredListRow key={`row-${item.id}-${i}`}>
      <StructuredListCell 
        key={`cell-${item.id}`} 
        noWrap 
        style={{
          paddingBottom: '.5rem',
          color: item?.status.includes("Working") 
            ? "red" 
            : item?.status.includes("Pending") 
              ? "orange" 
              : "yellow"
        }}
      >
        {item.status}
      </StructuredListCell>
    </StructuredListRow>
  ))}
</StructuredListBody>

总的来说，最推荐方案1，尤其是当你后续要增加更多条件时，单独的函数会让代码逻辑更清晰，也更容易调试和修改。

内容的提问来源于stack exchange，提问作者Na el