在react的jsx 中是否有优雅的方式判断一个数组存在就输出html标签？

Question

在react的jsx 中是否有优雅的方式判断一个数组存在就输出html标签？

我是这样写的，是否还有更加好的方法？

{          
  tracerouteMsgs ? tracerouteMsgs.msg.map((item, index) => (
    <>
     <span key={index}>{item}</span> <br/>
    </>
   )) : <></>
  
}

Answer 1

应该可以使用"?."运算符来简化

{          
  tracerouteMsgs?.msg.map((item, index) => (
    <>
     <span key={index}>{item}</span> <br/>
    </>
   ))
}

相关文档

可选链运算符（?.）

Answer 2

除了1楼说的使用可选链运算符的方式之外，其实可以给你循环的变量 tracerouteMsgs 做好兜底。
因为看起来，你的 tracerouteMsgs 很可能是一个响应结果，所以才使用的 tracerouteMsgs.msg 的形式来循环。
所以如果是这样的其实可以把 tracerouteMsgs 直接赋值为 tracerouteMsgs.msg 如果 msg 不存在或者为 null 就赋值为空数组 []，也就是你之前提问的 空值合并运算符:

function test(){
  const data = getTraceRouteMsg()
  var tracerouteMsgs = data.msg ?? []
  ...
}

// 如果 tracerouteMsgs 是空数组，自然不会有返回值，也不会渲染任何内容。
{tracerouteMsgs.map((item, index) => (
  <>
   <span key={index}>{item}</span> <br/>
  </>
))}