Question

我正在尝试创建一个项目列表，其中每行总是显示3个，当我单击“显示更多”按钮时，将显示另外3个。不幸的是，我在使用map和slice的过程中遇到了麻烦，因为使用这种方法总是将同一项目中的3个渲染为一行，并且不能解释项目数是否不能被3整除。欢迎任何建议

这是我到目前为止所拥有的（作为密钥的Math.random只是一个占位符）

  const renderRow = (
    documentData: {
      fileName: string;
      description: string;
      contentUrl: string;
    }[],
  ) => {
    return documentData.slice(0, limit).map((documentsRow, i) => {
      return (
        <Grid key={Math.random()} container spacing={1}>
          <Grid container item xs={12} spacing={3}>
            {renderRowItem(documentsRow)}
            {renderRowItem(documentsRow)}
            {renderRowItem(documentsRow)}
          </Grid>
        </Grid>
      );
    });
  };

这是一个有效的示例-https://codesandbox.io/s/react-hooks-typescript-list-with-load-more-button-fvbue

Answer 1

找到了一个解决方案，就像更新material-ui的网格系统一样容易。检查https://codesandbox.io/s/react-hooks-typescript-list-with-load-more-button-fvbue以获得答案

Answer 2

import React, { FC, useState } from "react";
import ReactDOM from "react-dom";
import {
  Grid,
  Paper,
  useMediaQuery,
  Container,
  Button
} from "@material-ui/core";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import { useStyles } from "./useStyles";

import { DOCUMENTS_MOCK_DATA } from "./documentsMockData";

const LIMIT_MOBILE = 1;
const LIMIT_WEB = 3;

export const App: FC = () => {
  const isMobile = useMediaQuery("500");
  const inititalLimit = isMobile ? LIMIT_MOBILE : LIMIT_WEB;

  const [limit, setLimit] = useState(inititalLimit);

  const { button, buttonWrapper, root, paper } = useStyles();

  const showMoreDocuments = () => {
    setLimit(limit + 3);
  };

  const renderRowItem = (documentData: {
    fileName: string;
    description: string;
    contentUrl: string;
  }) => {
    return (
      <>
        <Grid item xs={12} sm={4}>
          <Paper className={paper}>{documentData.fileName}</Paper>
        </Grid>
      </>
    );
  };

  const renderRow = (
    documentData: {
      fileName: string;
      description: string;
      contentUrl: string;
    }[]
  ) => {
    return documentData.slice(0, limit).map((documentsRow, i) => {
      return (
        <Grid key={Math.random()} container spacing={1}>
          <Grid container item xs={12} spacing={3}>
            {renderRowItem(documentsRow)}
          </Grid>
        </Grid>
      );
    });
  };

  const renderDocuments = (
    documentData: {
      fileName: string;
      description: string;
      contentUrl: string;
    }[]
  ) => {
    return (
      <Grid container spacing={1}>
        {renderRow(documentData)}
        <Grid className={buttonWrapper} container item xs={12}>
          <Button
            className={button}
            endIcon={<KeyboardArrowDownIcon />}
            onClick={showMoreDocuments}
          >
            show more documents
          </Button>
        </Grid>
      </Grid>
    );
  };

  return (
    <Container className={root}>
      {renderDocuments(DOCUMENTS_MOCK_DATA)}
    </Container>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

显示列表并显示更多按钮

2 个答案: