Question

我正在大量获取数据，同时我想懒加载反应表

import React, {Component, Fragment, lazy, Suspense} from 'react'; 
const ReactTable = lazy(() => import("react-table")); 
render() 
{ 
return ( 
<Suspense fallback={<div>Loading...</div>}> 
{this.state.securityCheck.length ? 
<ReactTable columns={columns} data={this.state.securityCheck} /> 
: 
<div className='text-center' style= {{fontSize: '20px'}}>No data =
Available! </div> } 
</Suspense> 
) 
}

Answer 1

从文档中：

fallback属性在等待组件加载时接受要渲染的所有React元素。您可以将Suspense组件放置在惰性组件上方的任何位置。您甚至可以用一个Suspense组件包装多个惰性组件。

尝试一下

<Suspense fallback={<div>Loading...</div>}> 
   <ReactTable columns={columns} data={this.state.securityCheck} /> 
</Suspense>

如何在React表上实现数据的延迟加载？

1 个答案: