如何将CellMeasurer与Table结合使用以测量图像高度

Question

我试图弄清楚如何在表格中使用CellMeasurer组件。我的表格渲染良好，但是所有图像都立即被获取 破坏包装的目的。

文档中的示例使用列表和deferredMeasurementCache道具，但据我所知Table上不存在道具。

我有a codesandbox说明了问题。

import ReactDOM from "react-dom";
import React from "react";
import { fromJS } from "immutable";
import "./style.css";
import {
  AutoSizer,
  Table,
  Column,
  SortIndicator,
  CellMeasurer,
  CellMeasurerCache
} from "react-virtualized";
import "react-virtualized/styles.css";
const images = [
  "https://images.unsplash.com/photo-1558980394-4c7c9299fe96?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1560681610-68f081d2e7dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1556229010-6c3f2c9ca5f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1560675770-ef24e89a6cef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1556911073-52527ac43761?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1560671440-71f808b4cb50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1560607985-67046623870e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1560527341-725efe8887d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
];

const rows = fromJS(images.map((url, i) => ({ url, text: `image ${i + 1}` })));

function headerRenderer({ dataKey, label, sortBy, sortDirection }) {
  // eslint-disable-line
  return (
    <div>
      {label}
      {sortBy === dataKey && <SortIndicator sortDirection={sortDirection} />}
    </div>
  );
}

function Example({ messages }) {
  const cachRef = React.useRef(
    new CellMeasurerCache({
      minHeight: 100,
      defaultHeight: 150,
      defaultWidth: 250,
      fixedWidth: true
    })
  );
  return (
    <AutoSizer>
      {({ width, height }) => (
        <Table
          height={height}
          width={width}
          rowCount={rows.count()}
          rowGetter={({ index }) => rows.get(index)}
          headerHeight={40}
          deferredMeasurementCache={cachRef.current}
          rowHeight={cachRef.current.rowHeight}
        >
          <Column
            label="Image"
            width={250}
            dataKey="url"
            cellDataGetter={({ dataKey, rowData }) => rowData.get(dataKey)}
            cellRenderer={({
              cellData,
              columnIndex,
              key,
              parent,
              rowIndex,
              style
            }) => {
              return (
                <CellMeasurer
                  cache={cachRef.current}
                  columnIndex={columnIndex}
                  key={key}
                  parent={parent}
                  rowIndex={rowIndex}
                >
                  {({ measure }) => (
                    <div style={style}>
                      <img
                        alt="foobar"
                        width={200}
                        onLoad={measure}
                        src={cellData}
                      />
                    </div>
                  )}
                </CellMeasurer>
              );
            }}
            disableSort
          />
          <Column
            label="Text"
            width={200}
            dataKey="text"
            cellDataGetter={({ dataKey, rowData }) => rowData.get(dataKey)}
            flexGrow={1}
            headerRenderer={headerRenderer}
          />
        </Table>
      )}
    </AutoSizer>
  );
}