React에 테이블 맵 목록을 올바르게 쓰려면 어떻게해야합니까?

Question

자습서를 읽고 따라 갔지만 몇 시간 동안 코드를 꼼짝 못하고 아직 완전히 이해하지 못하는 것 같습니다. 누군가 나에게 React의지도를 사용하여 테이블을 올바르게 작성하는 방법에 대한 적절한 설명을 줄 수 있습니까?

샘플 맵 데이터 :

너희들이 난 때문에 각 부분의 좋은 설명과 적절한 예를 도와 줄 수 있기를 바랍니다 : 나는 같이 표시 할 방법

[{"location_id":1,"location":"HKG","description":"Hong Kong","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0},{"location_id":2,"location":"KUL","description":"Kuala Lumpur","update_by":null,"update_time":null,"create_by":null,"create_time":null,"rec_state":0}] 

여전히 현재 문서와 혼동 중이다. 감사.

Answer 1

표의 시작 부분을 출력 한 다음 내용의 배열을 맵핑 한 다음 끝을 출력하십시오.

function MyComponent(props) { 
    return (
    <table> 
     <thead> 
     <tr> 
      <th>ID</th> <th>Location</th> <th>Description</th> 
     </tr> 
     </thead> 
     <tbody> 
     { 
      props.data.map(row => (
      <tr> 
       <td>{row.location_id}</td> 
       <td>{row.location}</td> 
       <td>{row.description}</td> 
      </tr> 
     )) 
     } 
     </tbody> 
    </table> 
); 
}