如何使用React.js而不是JQuery.js克隆React组件（以附加到其他地方）

Question

我正在使用React.js + Backbone.js处理一些字段集。

我有一个包含许多列和行的表。 任务是在列数大于屏幕上显示的列时固定第一列。 （例如，总列数为8，屏幕上只能显示6列）因此可以通过水平滚动查看其他两列。

使用我现在的逻辑，使用jQuery克隆每一行的每个第一列，并创建一个新表，然后将其附加到原始表之后，使用CSS将其定位在原始表上，这样用户就可以看到第一列列是固定的。

我不满足于这种方法，需要你的帮助，以伟大的Reactjs伟大的虚拟DOM做得很好:)任何想法，建议将是可观的:)

Answer 1

从简单的反应表组件开始：

var Table= React.createClass({
    render: function() {
        return <table>
            {this.props.data.map(function(row){
                return <tr>
                    {row.map(function(cell){
                        return <td> {cell} </td>
                    })}
                </tr>
            })}
        </table>;
    }
});

这个组件只是一个演示，现实生活表应该更复杂。

现在，你想要的表是这个组件：

var DubbledTable= React.createClass({
    render: function() {
        var firstColumn= 
            this.props.data.map(function(row){
                return [row[0]]
            })
        return <span>
            <Table data={firstColumn} />
            <Table data={this.props.data} />
        </span>
    }
})

演示 - http://jsfiddle.net/psx9f644/

请享用