Добавить bullets (•) между html-ссылками, кроме последнего элемента, динамически сгенерированных ссылок в React

Question

Я динамически обрабатываю данные в React после совершения вызова api, а затем сопоставляю результаты, чтобы показать ссылки на веб-сайты в таблице. Все работает по назначению, за исключением того, что мне нужно добавить пули между каждой ссылкой для сегментации контента для пользователя (любое количество ссылок на строку - оно может быть до десяти). Мне нужно убедиться, что нет конечной пули, если на каждую строку отображается только одна ссылка, а также не добавляет пулю за последней ссылкой в ​​строке, если ее больше одного. Ниже рабочий код, вы можете увидеть HTML • после {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 • ссылки 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, чем вам нужно будет добавить проверку индекса на вашем петля. Если это не последнее, чем добавить пулю.

Я не реагировать Дев, но основная идея с 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>`; }));