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/

行的JSX对象表示

1 个答案: