我正在使用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/