Question

我有一个反应组件，我尝试使用固定标题和固定的第一列渲染类似Excel的网格。期望的行为是：

向左滚动＆amp;右：第一列保持原位，而其他列滚动，包括标题行
向上滚动＆amp;向下：所有列向上滚动＆amp;向下除了保持固定的标题

适用于此克隆的现有技术将固定标题和列放入另一个覆盖现有表格的div中 - 这使得表格可以像往常一样运行，只有X＆amp;固定div的Y偏移需要调整。参见示例：http://www.disconova.com/open_source/files/freezepanes.htm

如何使用React构建它？

到目前为止，我有类似的内容：

var Grid = React.createClass({
    renderRow: function (row, i) {
        return (<GridRow key={i} rowIdx={i} cols={row} />);
    },
    render: function () {
      return (
        <div className="grid-container" ref="container">

          <!-- this is where I *think* I need cloned divs --> 

          <div className="grid" ref="grid">
            <div className="grid-body">
              {this.props.rows.map(this.renderRow)}
            </div>
          </div>
        </div>
      );
    }
});

我原以为我会有一个<FixedRow />和<FixedColumn />组件，上面的评论是，但我不确定如何获取需要的行的DOM节点被克隆。克隆的原因是他们必须在属性，维度等方面进行匹配。有关如何解决这个问题的想法吗？

如何克隆React组件DOM节点？

0 个答案: