循环遍历展示列表数据时如何仅渲染一次指定<div>标签

你可以在循环外声明一个标记位，用来记录suggestions文本是否已经渲染过，即可实现整个循环周期内仅显示一次的需求，具体实现代码如下：

// 初始化标记位，记录suggestions是否已经渲染
let hasShowSuggestion = false
const listItems = numbers.map((number) => (
  <li>
    {number.imageUrl && (
      <>
        {/* 仅未渲染过时才显示suggestions */}
        {!hasShowSuggestion && <div>suggestions</div>}
        {/* 渲染后立即修改标记位状态 */}
        {hasShowSuggestion = true}
        <div>{number.imageUrl}</div>
      </>
    )}
    <div>{number.text}</div>
  </li>
))

如果是在React函数组件中使用，且numbers数组会动态更新需要重新渲染列表，建议将标记位存到useRef中避免额外触发组件重渲染：

import { useRef } from 'react'

// 组件内部逻辑
const suggestFlagRef = useRef(false)
// 每次渲染列表前重置标记位
suggestFlagRef.current = false

const listItems = numbers.map((number) => (
  <li>
    {number.imageUrl && (
      <>
        {!suggestFlagRef.current && <div>suggestions</div>}
        {suggestFlagRef.current = true}
        <div>{number.imageUrl}</div>
      </>
    )}
    <div>{number.text}</div>
  </li>
))

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