javascript - npm 包 react-virtualized 如何与可调整大小的表单输入一起使用？

Question

react-virtualized 暴露了相关组件 List、CellMeasurer 和 CellMeasurerCache。只要不使用表单组件，它们就可以可靠地一起使用以创建具有动态计算的行高的虚拟化列表。我很难让 API 响应多行表单输入，计算出的高度对应于每个组件的大小，多行输入没有扩展以适应从状态传入的文本。

const cache = new CellMeasurerCache({
   fixedWidth: true,
   minHeight: 56,
})

 const rowRenderer = ({index, key, parent, style}) => {

// State pulled from API

       return <CellMeasurer
           cache={cache}
           columnIndex={0}
           key={key}
           rowIndex={index}
           parent={parent}
           >
           {({registerChild}) => (
               <div style={style}>
                   <Input multiline value={state.elements[index].text}/>
               </div>
           )}
       </CellMeasurer>
   }

return  <List
  width={650}
  height={600}
  deferredMeasurementCache={cache}
  overscanRowCount={2}
  rowHeight={cache.rowHeight}
  rowCount={state.elements.length}
  rowRenderer={rowRenderer}
  />
}

谢谢

标签： javascriptreactjsmaterial-uireact-virtualized