Question

我在进行api调用后在React中动态呈现数据，然后映射结果以显示表格中网站的链接。一切都按预期工作，除了我需要在每个链接之间添加项目符号以分割用户的内容（每行任意数量的链接 - 最多可达10个）。我需要确保如果每行只有一个链接呈现，并且如果有多个链接，则不会在最后一个链接后面添加一个子弹。下面是工作代码，您可以在{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添加项目符号

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您不想使用CSS，则需要在循环中添加检查索引。如果它不是最后一个，那就加上子弹。

我不是反应开发者，但ES6的基本想法是

＆＃13;

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>`; }));

＆＃13;

在html链接之间添加项目符号（•），但在React

1 个答案: