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

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

按照目前的逻辑,使用jQuery克隆每行的第一列,并创建一个新表,然后将其追加到原始表之后,使用CSS将其放置在原始表上,以便用户可以看到第一行列是固定的。

我对这种方法不满意,需要您的帮助来完成出色的Reactjs的出色虚拟DOM :)任何想法,建议都是可取的:)

最佳答案

从简单的React Table组件开始:

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>
    }
})

demo- http://jsfiddle.net/psx9f644/

请享用

关于javascript - 如何使用React.js而不是JQuery.js克隆React组件(追加到其他地方),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25218550/

10-09 19:55
查看更多