React函数组件循环内如何实现条件渲染？

你遇到的语法问题是因为在map的回调函数里错误嵌套了额外的{}，同时需要处理null值调用方法的报错。以下是几种可行的写法：

方法一：直接在JSX中使用三元运算符 #

<tbody>
  {ratioMetrics && Object.entries(metrics).map(([metric, metricReadable]) => (
    <tr key={metric}>
      <td>{metricReadable}</td>
      {Object.entries(ratioMetrics).map(([key, value]) => {
        const metricValue = value[metric];
        // 用循环的key作为td的key，避免null导致key重复触发React警告
        return (
          <td key={key}>
            {metricValue !== null 
              ? Intl.NumberFormat('en', { notation: 'compact' }).format(metricValue.toPrecision(4))
              : metricValue}
          </td>
        );
      })}
    </tr>
  ))}
</tbody>

这里把value[metric]存为变量避免重复取值，用三元运算符分支处理null和非null的情况，同时替换了不可靠的key值。

方法二：提取格式化逻辑到独立函数 #

如果格式化逻辑后续有调整需求，抽成单独函数能让代码更简洁易维护：

// 定义格式化函数
const formatMetric = (value) => {
  if (value === null) return value;
  return Intl.NumberFormat('en', { notation: 'compact' }).format(value.toPrecision(4));
};

// JSX部分
<tbody>
  {ratioMetrics && Object.entries(metrics).map(([metric, metricReadable]) => (
    <tr key={metric}>
      <td>{metricReadable}</td>
      {Object.entries(ratioMetrics).map(([key, value]) => (
        <td key={key}>{formatMetric(value[metric])}</td>
      ))}
    </tr>
  ))}
</tbody>

你之前写法的问题 #

你尝试的代码中，map回调用()包裹JSX，但内部又嵌套了{}，这相当于在JSX表达式里错误使用了对象语法；同时回调函数没有显式return元素，React无法识别正确输出。如果要在回调里用条件判断，要么用{}包裹函数体并显式return，要么直接写表达式（比如三元运算符）。

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