Javascript 如何根据React中的元素数进行分页？_Javascript_Reactjs

Javascript 如何根据React中的元素数进行分页？

javascript reactjs

Javascript 如何根据React中的元素数进行分页？,javascript,reactjs,Javascript,Reactjs,在React项目中，我有一个认证图像，并打算根据其编号进行分页。就像我想要9张图片（3行X 3列）在第一页，9张图片在另一页，依此类推。那怎么能做到呢 const data = [ { img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg" }, { img: "https://cdn.pixabay.com/photo/2013/07/21/1

在React项目中，我有一个认证图像，并打算根据其编号进行分页。就像我想要9张图片（3行X 3列）在第一页，9张图片在另一页，依此类推。那怎么能做到呢

const data = [
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  }
];

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

const useStyles3 = makeStyles((theme) => ({
  root: {
    "& > *": {
      marginTop: theme.spacing(2)
    }
  }
}));

export default function BasicPagination() {
  const classes3 = useStyles3();
  const classes = useStyles();
  return (
    <>
      <div className={classes.root}>
        <Grid container spacing={1}>
          <Grid container item xs={12} spacing={4}>
            {data.map((dataNew) => (
              <Grid item xs={4}>
                <img src={dataNew.img} height="30px" />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </div>
      <div className={classes3.root}>
        <Pagination count={10} />
      </div>
    </>
  );
}

const数据=[
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
}
];
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1
},
论文：{
填充：主题。间距（1），
textAlign：“居中”，
颜色：theme.palete.text.secondary
}
}));
const useStyles3=makeStyles（（主题）=>({
根目录：{
"& > *": {
marginTop：主题。间距（2）
}
}
}));
导出默认函数BasicPagination（）{
const classes3=useStyles3（）；
const classes=useStyles（）；
返回(
{data.map（（dataNew）=>(
))}
);
}

使用分页渲染图像的合适解决方案是什么

这是codesanbox链接：

您需要维护状态才能实现这一点

import React, {useState} from "react";
import { makeStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";
import Grid from "@material-ui/core/Grid";

const data = [
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  },
  {
    img: "https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
  }
];

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

const useStyles3 = makeStyles((theme) => ({
  root: {
    "& > *": {
      marginTop: theme.spacing(2)
    }
  }
}));

export default function BasicPagination() {
  const classes3 = useStyles3();
  const classes = useStyles();
  const [currentPage, setCurrentPage] = useState(1);
  return (
    <>
      <div className={classes.root}>
        <Grid container spacing={1}>
          <Grid container item xs={12} spacing={4}>
            {data.slice((currentPage - 1) * 9, currentPage * 9).map((dataNew) => (
              <Grid item xs={4}>
                <img src={dataNew.img} height="30px" />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </div>
      <div className={classes3.root}>
        <Pagination count={Math.ceil(data.length / 9)} onChange={(event, value) => setCurrentPage(value)} />
      </div>
    </>
  );
}

import React，{useState}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/lab/Pagination”导入分页；
从“@material ui/core/Grid”导入网格；
常数数据=[
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
},
{
img:“https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819__340.jpg"
}
];
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1
},
论文：{
填充：主题。间距（1），
textAlign：“居中”，
颜色：theme.palete.text.secondary
}
}));
const useStyles3=makeStyles（（主题）=>({
根目录：{
"& > *": {
marginTop：主题。间距（2）
}
}
}));
导出默认函数BasicPagination（）{
const classes3=useStyles3（）；
const classes=useStyles（）；
const[currentPage，setCurrentPage]=useState（1）；
返回(
{data.slice（（currentPage-1）*9，currentPage*9）.map（（dataNew）=>(
))}
setCurrentPage（值）}/>
);
}