将数据数组呈现为分页组件 [英] Render data array as paginated components
问题描述
我是 React 的新手，所以如果我弄错了术语，请原谅我.
我想创建一种对组件数组进行分页的方法.为此，我按照每页所需的项目数量对数组进行了切片，并将每页存储到一个 ne 数组中，例如:
const 限制 = 4const numPages = 20让 pagewrapper = []for (让 i = 0; i 然后我创建了一个简单的按钮来一次显示每个页面.
<按钮onClick={this.pagerHandleClick}>{'展示更多'}</按钮>处理程序看起来像:
pagerHandleClick() {this.setState(state => ({页面:state.page + 1，}))}但是从这里我有点卡住了.我不知道如何告诉每个 <Grid/> 显示它自己.我谷歌的所有解决方案似乎都表明将组件包装在 if 语句中，但将每个数组项包装在它自己的 if 语句中似乎很奇怪.
过去我会在 Vanilla JS 或 JQuery 中使用简单的 getElementByClass. 完成此操作.但我不知道在 React 中是否可以通过这种方式实现.
有人能在这里指出我正确的方向吗?
非常感谢
假设您一次性获得所有数据(例如从 API 获取)并且只需要渲染其中的一部分，您可以简单地动态切片源数据数组，在组件状态下跟踪当前页面(例如，页面长度为 5 个项目):
const [data, setData] = useState([]),[page, setPage] = useState(0),maxPage = Math.ceil(data.length/5),onNextPage = () =>setPage((page+1)%maxPage),onPrevPage = () =>setPage((page+5-1)%maxPage)<网格容器>{数据.slice(页*5,5*(页+1)).map((content,key) => (<网格项目{...{key}}><Paper className="paper">{content}</Paper></网格>))}</网格>您可能想查看以下演示以获取完整示例(我猜您一直在使用 material-ui 来设置组件的样式):
//依赖const { 渲染 } = ReactDOM，{ useState, useEffect } = React,{ 按钮、纸、网格、线性进度 } = MaterialUI、{ 获取} = axios//分页输出，默认每页5个项目const 分页板 = () =>{//启动状态和事件处理程序const [data, setData] = useState([]),[page, setPage] = useState(0),maxPage = Math.ceil(data.length/5),onNextPage = () =>setPage((page+1)%maxPage),onPrevPage = () =>setPage((page+5-1)%maxPage)//获取组件渲染上的src数据useEffect(() => get('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=k9DaUAw5wUAei4J5WXRsy3EL988RADE3').then(({data:{results}}) => setData(results.map(({abstract}) => abstract))),[])//返回组件主体返回数据长度?(<网格容器间距="2" >{数据.slice(页*5,5*(页+1)).map((content,key) => (<网格项目{...{key}}><Paper className="paper">{content}</Paper></网格>))}</网格><div><Button onClick={onPrevPage} disabled={!page}><Prev</Button><Button onClick={onNextPage} disabled={page==Math.ceil(data.length/5)-1}>Next></Button></div>) :<LinearProgress style={{margin:'70px',width:'50%'}}/>}//使成为使成为 (<分页板/>,document.getElementById('root'))
.grid {宽度:70%；保证金:自动；}.纸 {宽度:100px；高度:145px；溢出:隐藏；}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.min.js"></script><div id="root">I'm new to React so please forgive me if I get the terminology wrong.
I want to create a way of paginating an array of components. To that effect, I have sliced the array by the required amount of items per page and stored each page into a ne array, eg:
const limit = 4
const numPages = 20
let pagewrapper = []
for (let i = 0; i < numPages; i++) {
let start = i * limit
let end = start + limit
let pageItems = children.slice(start, end)
// Skip first array push as 'page 1' is already showing.
if (end != limit) {
pagewrapper.push(<Grid gridContainerStyles={'grid-page__' + i} items={pageItems} />)
}
}
I then created a simple button to reveal each page at a time.
<Button
onClick={this.pagerHandleClick}
>
{'Show more'}
</Button>
With the handler looking like:
pagerHandleClick() {
this.setState(state => ({
page: state.page + 1,
}))
}
But from here I am kind of stuck. I don't know how to tell each <Grid /> to reveal it's self. All the solutions I Google seem to indicate wrapping the component in an if statement, but it seems odd to wrap each array item in it's own if statement.
In the past I would've done this in Vanilla JS or JQuery with a simple getElementByClass. But I don't know if that's achievable in React this way.
Would anyone be able to point me in the right direction here?
Many thanks
Assuming you got your data all at once (e.g. fetched from API) and need to render only some portion of it, you may simply slice source data array dynamically, keeping track of your current page within components state (e.g. for page length of 5 items):
const [data, setData] = useState([]),
[page, setPage] = useState(0),
maxPage = Math.ceil(data.length/5),
onNextPage = () => setPage((page+1)%maxPage),
onPrevPage = () => setPage((page+5-1)%maxPage)
<Grid container>
{
data
.slice(page*5,5*(page+1))
.map((content,key) => (
<Grid item {...{key}}>
<Paper className="paper">{content}</Paper>
</Grid>
))
}
</Grid>
You might want to check out the following demo for complete example (I guessed you've been using material-ui to style your components):
//dependencies
const { render } = ReactDOM,
{ useState, useEffect } = React,
{ Button, Paper, Grid, LinearProgress } = MaterialUI,
{ get } = axios
//paginated output, by default 5 items per page
const PaginatedBoard = () => {
//initiate state and event handlers
const [data, setData] = useState([]),
[page, setPage] = useState(0),
maxPage = Math.ceil(data.length/5),
onNextPage = () => setPage((page+1)%maxPage),
onPrevPage = () => setPage((page+5-1)%maxPage)
//fetch src data on component render
useEffect(() => get('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=k9DaUAw5wUAei4J5WXRsy3EL988RADE3').then(({data:{results}}) => setData(results.map(({abstract}) => abstract))),[])
//return components body
return data.length ?
(<div>
<Grid container spacing="2" >
{
data
.slice(page*5,5*(page+1))
.map((content,key) => (
<Grid item {...{key}}>
<Paper className="paper">{content}</Paper>
</Grid>
))
}
</Grid>
<div>
<Button onClick={onPrevPage} disabled={!page}><Prev</Button>
<Button onClick={onNextPage} disabled={page==Math.ceil(data.length/5)-1}>Next></Button>
</div>
</div>) :
<LinearProgress style={{margin:'70px',width:'50%'}} />
}
//render
render (
<PaginatedBoard />,
document.getElementById('root')
)
.grid {
width:70%;
margin:auto;
}
.paper {
width:100px;
height:145px;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.min.js"></script><div id="root"></div>
这篇关于将数据数组呈现为分页组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
