Arrowkeystepper无法在反应虚拟化中工作

时间:2018-06-03 21:06:05

标签: reactjs react-virtualized

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')

0 个答案:

没有答案