我知道这个问题已经被问过很多次了，我已经浏览了很多stackoverflow的帖子，但是我似乎找不到我所面临的确切问题。下面是代码：

<tbody>
        {ratioMetrics && Object.entries(metrics).map(([metric, metricReadable]) => (
          <tr key={metric}>
            <td>{ metricReadable }</td>
            {Object.entries(ratioMetrics).map(([key,value]) => (
              <td key={value[metric]}>{ value[metric] }</td>
              // <td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>
            ))}
          </tr>
        ))}
</tbody>

有时候value[metric]可能是null，所以注解行失败，因为我不能在null的东西上调用toPrecision。因此，我只希望注解行在value[metric]不为null时呈现，如果为null，则呈现它上面的行。
如果不为空：

<td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>

如果为空：

<td key={value[metric]}>{ value[metric] }</td>

我尝试了下面的方法，但是我认为react不喜欢这个语法，因为循环已经包含了{}。

{Object.entries(ratioMetrics).map(([key,value]) => (
      {!value[metric] && <td key={value[metric]}> "" </td>}
      {value[metric] && <td key={value[metric]}>{ Intl.NumberFormat('en', { notation: 'compact' }).format(value[metric].toPrecision(4)) }</td>}
))}

所以我的问题是我该怎么解决这个问题？谢谢。