Представление объектов 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/