如何从站点中删除最后一个SVG按钮?SVG按钮只应该位于每个单词之间

Question

按钮在站点上的外观

<div className="teams-row">
{
specialTeams.map(
(specialTeam) => <span key={specialTeam._id}>{specialTeam.name}
<svg className="dot-svg" width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="2.94396" cy="3" rx="2.94396" ry="3" fill="#3B5889" />
</svg>
</span>
)
}
</div>

大家好！我正在尝试删除"之后的最后一个SVG按钮；发动机操作员"我在上面发布了一小段代码和图片。

Answer 1

只有当SVG不是最后一个元素时，才尝试有条件地渲染它。类似这样的东西：

<div className="teams-row">
{specialTeams.map((specialTeam, index) => <span key={specialTeam._id}> 
{specialTeam.name}
{(index != specialTeams.length - 1) &&  <svg className="dot-svg" width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="2.94396" cy="3" rx="2.94396" ry="3" fill="#3B5889" />
</svg>}
</span>
)}
</div>