如何克隆 React 组件 DOM 节点？

Question

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

• 左右滚动：第一列保持原位，而其他列滚动（包括标题行）
• 向上和向下滚动：除了保持固定的标题之外，所有列都向上和向下滚动

适用于此的现有技术将固定标题和列克隆到覆盖现有表格的另一个 div 中 - 这允许表格正常运行，并且仅需要调整固定 div 的 X 和 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 节点。克隆的原因是它们必须在属性、维度等方面匹配。关于如何解决这个问题有什么想法吗？