REACT-VIRTUALIZED:我试图在React-virtualized中设置arrow-key-stepper,hoc组件。
此代码在CODE SANDBOX上正常运行,但在默认浏览器中使用npm / yarn作为Chrome和Mozilla的开发服务器没有。
这是我的代码 -
const list = [
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
];
function cellRenderer ({ columnIndex, key, rowIndex, style }) {
// console.log('ColumnIndex', columnIndex)
return (
<div
key={key}
style={style}
>
{list[rowIndex][columnIndex]}
</div>
)
}
ReactDOM.render(
<ArrowKeyStepper
columnCount={list[0].length}
rowCount={list.length}
>
{({ onSectionRendered, scrollToColumn, scrollToRow }) => (
<Grid
columnCount={list[0].length}
rowCount={list.length}
onSectionRendered={onSectionRendered}
scrollToColumn={scrollToColumn}
scrollToRow={scrollToRow}
cellRenderer={cellRenderer}
columnWidth={100}
height={300}
rowHeight={30}
width={300}
/>
)}
</ArrowKeyStepper>,
document.getElementById('root')