현재 모든 행에 대해 행 인덱스를 표시해야하는 테이블을 만들려고합니다. 나는 이것이 간단한 일이라고 생각했지만 곧 그것이 내 지식에서 벗어났다는 것을 깨달았습니다.
테이블은 가져온 JSON 파일 ( this.state )을 반복 (맵)하고 this.state.body.map () 에서 소품 "player"를 사용하여 React.createElement 에 의해 컴포넌트를 생성합니다.
아래는 테이블 구성 요소입니다.
render() {
return (
<div>
<table className="ranked_table">
<tbody>
{this.state.body.map(player => React.createElement(Cell, player))}
</tbody>
</table>
<button id="vote_btn"><a>RANK</a></button>
</div>
);
}
그리고 아래는 행 구성 요소입니다.
render() {
return (
<tr className="row">
<th>{**DESIRED RANK COLUMN**}</th>
<th>
<div className="image_border">
<img src={this.props.image} className="profile_pic" alt="" >
</img>
<div className="medal"></div>
</div></th>
<th><div className="name">{this.props.name}</div></th>
<th>
<a className="upVote">
<img src="/asset/vote_btn.svg"></img>
</a>
</th>
<th className="count">{this.props.count}</th>
</tr>
);
}
행 인덱스 열을 어떻게 만들 수 있습니까? 행 구성 요소에 소품으로 전달되는 상태 개체를 수정하려고했지만 거기에도 갇혀있었습니다.
map함수는 현재 인덱스를 콜백 함수에 전달합니다. 해당 인덱스를 행 구성 요소에 전달할 수 있습니다.
this.state.body.map((player, index) => React.createElement(Cell, {player, rowNum: index}))
로 index0에서 시작, 당신은 아마 소품으로 통과 할 때 각 인덱스 값에 1을 추가 할
React.createElement(Cell, {player, rowNum: index + 1 })
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다