javascript - 在 React 中动态生成的链接之外的 html 链接之间添加项目符号 (•)

Question

在进行 api 调用后，我在 React 中动态渲染数据，然后映射结果以在表格中显示网站的链接。一切都按预期工作，只是我需要在每个链接之间添加项目符号来为用户分段内容(每行任意数量的链接 - 可以是一到十)。如果每行仅呈现一个链接，我需要确保没有尾随项目符号；如果有多个链接，则不要在一行中的最后一个链接后面添加项目符号。下面是工作代码，您可以在 {data.title}

之后看到 html •

<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 • 链接 2 •
第 2 行链接 1 •
第 3 行链接 1 • 链接 2 • 链接 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 开发者，但 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>`; }));