마지막 항목을 제외하고 html 링크 사이에 글 머리 기호 (•)를 추가하십시오. 반응에서 동적으로 생성 된 링크

Question

api 호출 후 React에서 동적으로 데이터를 렌더링 한 다음 결과를 통해 매핑하여 테이블의 웹 사이트에 대한 링크를 표시합니다. 모두 사용자의 콘텐츠를 분할하기 위해 각 링크 사이에 글 머리 기호를 추가해야한다는 점을 제외하고는 모두 의도 한대로 작동합니다 (행당 모든 링크 수 - 최대 10 개까지 가능). 하나 이상의 링크가있는 경우 행에 마지막 링크 뒤에 글 머리 기호를 추가하지 않고 행당 하나의 링크 만 렌더링하는 경우 후행 글 머리 기호가 없는지 확인해야합니다. 아래 코드를 작동하고, 당신은 {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> 

출력 후 HTML •을 볼 수있는 것은 :

행 1 개 링크 1 개 • 링크 2 •
행 2 링크 1 •
행 3 링크 1 • 링크 2 • 링크 3

올바른 수의 링크가있는 경우 (3 행에서 볼 수 있음) 작동합니다. 데이터를 제어 할 수 없습니다. 내가 돌아 왔을 때 총알을 현명하게 추가해야합니다.

미리 감사드립니다.

Answer 1

난 당신이 CSS와 함께 할 싶지 않은 경우에 체크를 인덱스를 추가해야 할 것보다 그냥, 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>

으로 글 머리 기호를 추가 할 수 있습니다 언급하여 고리. 마지막이 아니라면 총알을 추가하십시오.

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