행의 JSX 객체 표현

Question

JSX을 사용하여 한 번에 하나의 함수 호출에서 아래처럼 여러 행을 렌더링 할 수 있기를 원한다면.

ObjectRow의 코드는 rows.push(<ObjectRow />);에 어떤 모양이되어야합니까?

var rows = []; 
for (var i=0; i < numrows; i++) { 
    rows.push(<ObjectRow />); 
} 
return <tbody>{rows}</tbody>; 

나는 각 행은 다음과 같이 할 :

<tr> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{5}</td>     
      <td className={lastClass}>{5}</td> 
      <td className={changeClass}>{5} <span className={iconClass} aria-hidden="true"></span></td> 
      <td>{5}</td> 
      <td>{5}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
      <td>{}</td> 
</tr> 

마지막으로 나는이 모든 행을 렌더링 할 :

var StockRow = React.createClass({ 

    things: function(){ 
     var rows = []; 
     for (var i=0; i < numrows; i++) { 
      rows.push(<ObjectRow />); 
     } 
     return <tbody>{rows}</tbody>; 
    }, 
... 

Answer 1

가이 작업을 수행하는 여러 가지 방법이 있습니다. 또한 각 행에 대해 표시 할 데이터 (ObjectRow에 소품)를 보내야합니다. 나는 똑같은 바이올린을 만들었습니다.

아래의 피들에서는 표 머리글과 몇 가지 추가 데이터를 추가하여 열을 명확하게 구별 할 수 있도록했습니다. 변수 tableData이 (가) 서버에서 데이터를 반환했습니다.

https://jsfiddle.net/birjubaba/cby5pxcc/3/