Arrays 如何检查数组的第一个元素和一些jsx

我需要检查我的数组，第一个元素jxs应该不同于其他元素jsx

数组：

[
  {
    title: 'sth'
  },
  {
    title: 'sth'
  },
  {
    title: 'sth'
  }
]

第一个要素：

<>
  <img src="" />  // its static and has no flag in array
  <div>{item.title}</div>
</>

//它是静态的，在数组中没有标志
{item.title}

第二个要素：

<>
  <div>{item.title}</div>
</>

{item.title}

---

数据是动态的，我只需要将图像添加到jsx中的第一个元素中。

我想知道图像是否需要成为第一个元素的一部分（特别是因为您使用的是片段）——您可以这样做：

const MyComponent = ({ values }) => (
  <img src="" />
  {values.map((item) => (
    <div>{item.title}</div>
  )}
)

---

如果数组中的第一项是图像中唯一具有“src”的项，则可以在返回的数组上进行映射时使用

const items = [{ title: 'sth', src: 'https://image.png' }, { title: 'sth' }, { title: 'sth' }]

return (
  <>
    {items.map(item => (
      <>
        {item.src && <img src={item.src} />}
        <div>{item.title}</div>
      </>
    ))}
  </>
)

null

是JSX的有效返回值

---

我建议研究条件呈现的Reacts页面。

对象中没有src键。

const items = [{ title: 'sth', src: 'https://image.png' }, { title: 'sth' }, { title: 'sth' }]

return (
  <>
    {items.map(item => (
      <>
        {item.src && <img src={item.src} />}
        <div>{item.title}</div>
      </>
    ))}
  </>
)

if(item.src == true) {
   return <img src={item.src}/>
} else {
   return null
}