React如何将数组元素渲染为多个独立标签而非放在同一个标签内

修改后的代码如下：

let functionSupplement = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo.map(array => array.ingredientsInfo?.[0].mFunctionalDisplayText) || [];

// 可选：如果需要过滤空值、undefined等无效项，可补充下面这行避免渲染空p标签
// functionSupplement = functionSupplement.filter(Boolean);

console.log(functionSupplement) // (2) ["Hi","Hi"]
   
return (
  <div>
    {functionSupplement.map((text, index) => (
      <p key={index}>{text}</p>
    ))}
  </div>
)

修改说明 #

• 给functionSupplement增加了兜底逻辑|| []，避免变量为undefined时遍历报错
• 在JSX中直接调用数组的map方法遍历每一项，给每一项单独用<p>标签包裹，即可实现每个数组元素独占一个p标签的效果
• 给每个<p>标签添加了key属性，符合React列表渲染的规范要求，如果可以保证每个text值唯一，将key替换为key={text}会获得更好的渲染性能

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