react-virtualized中cellDataGetter返回Input组件显示Object如何解决

react-virtualized 中 cellDataGetter 属性的作用是提取单元格对应的原始数据，返回值会被作为纯文本/数据处理，直接返回 JSX 组件会被强制转为字符串，因此显示为 Object...。自定义单元格渲染逻辑需使用 cellRenderer 属性实现。

1. 调整 cellDataGetter 逻辑 #

仅保留原始数据提取功能，修复原有逻辑中 Immutable 类型数据取值被覆盖的问题：

codeDataGetter = ({
  dataKey,
  rowData,
}) => {
  let dataToReturn = '';
  if (rowData) {
    if (typeof rowData.get === 'function') {
      dataToReturn = rowData.get(dataKey);
    } else {
      dataToReturn = rowData[dataKey];
    }
  }
  return dataToReturn;
};

2. 新增自定义单元格渲染函数 #

使用 cellRenderer 专门渲染 Input 组件，同时修复原有代码中 event 未声明、index 无来源的问题：

codeCellRenderer = ({
  cellData, // 来自 cellDataGetter 返回的原始值
  rowIndex, // 表格提供的当前行索引
}) => {
  return (
    <Input
      type='text'
      className='form-control'
      value={cellData}
      placeholder={translateText('Code')}
      onChange={(event) => this.handleCodeChange(event, rowIndex)}
      style={{ height: '70%' }}
    />
  );
};

3. 更新 Column 配置 #

在 Code 列的配置中新增 cellRenderer 属性关联自定义渲染函数：

const columns = (
  [ <Column
      key={3}
      label='Code'
      dataKey='code'
      width={widthOfEachGrid * 1}
      cellDataGetter={this.codeDataGetter}
      cellRenderer={this.codeCellRenderer}
    />,
    <Column
      key={4}
      label='Code Description'
      dataKey='code_description'
      width={widthOfEachGrid * 2}
      cellDataGetter={this.codeDescriptionDataGetter}
    />,
  ]
);

内容的提问来源于stack exchange，提问作者rudeTool