在 HTML 链接之间添加项目符号 (•)，但 React 中最后一项动态生成的链接除外

Question

我在进行API调用后在React中动态渲染数据，然后绘制结果以显示表中网站的链接。一切都按预期工作，除了我需要在每个链接之间添加子弹以分割用户的内容（每行链接的任意数量 - 最多可以是十个）。如果每行只有一个链接，则我需要确保没有一个尾随的子弹，并且如果有多个链接，则在连续的最后一个链接后面不会在一个以上的链接后面添加子弹。以下是工作代码，您可以看到HTML＆Bull;{data.title}

之后

<table className="graph-table">
    <thead>
        <tr id="table-header" className="table-row">
        </tr>
    </thead>
    <tbody>
        { displayData.map( ( item, i ) => {
            return (
                <tr className="table-row">
                    <td> { item.categoriesArray.map(( {data}) => { return  <a href={data.uri}> {data.title} &bull;</a> })}
                    </td>
                </tr>
            )
          })
        }
    </tbody>
</table>

输出为：

第1行链接1＆bull;Link 2＆Bull;
第2行链接1＆Bull;
第3行Link 1＆Bull;Link 2＆Bull;链接3

如果有正确数量的链接（如第3行所示），我只是无法控制我回来的数据，我需要巧妙地添加子弹。

预先感谢。

Answer 1

我提到您可以将子弹添加给CSS

.table-row a {
  text-decoration: none;
}
.table-row a::after {
  content: " 2022";
}
a:last-child::after {
  content: ""
}

<div class="table-row">
  <a href="#">a</a>
  <a href="#">b</a>
  <a href="#">c</a>
</div>
<div class="table-row">
  <a href="#">a</a>
  <a href="#">b</a>
</div>
<div class="table-row">
  <a href="#">a</a>
</div>

如果您不想使用CSS进行操作，那么您需要在循环中添加索引。如果不是最后一个，那么添加子弹。

我不是React Dev，但是ES6的基本思想是

var links = [{uri:"a", title:"aa"},{uri:"b", title:"bb"},{uri:"c", title:"cc"}];
console.log(links.map( (data, i, a) => { let bull = (i+1!==a.length) ? ' &bull;' : ''; return `<a href="${data.uri}"> ${data.title}${bull}</a>`; }));