如何在改变列数的同时重用代码包装Material-UI的网格？

问题描述

我希望将标题为“其他注意事项”下的第二个网格块映射为3列网格。不创建新组件怎么办？ Material-UI用grid item xs={12} sm={6}控制它的列，在3列网格上，我需要将其读取为grid item xs={12} sm={6} lg={4}。 似乎我将复制并粘贴<Card />组件并重命名它以实现此目的。我想避免这种情况。下面的演示：

codesandbox

这是我当前的Card组件的代码：

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import { makeStyles } from '@material-ui/core/styles';
import { loadCSS } from 'fg-loadcss';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Icon from '@material-ui/core/Icon';
import GitHubIcon from '@material-ui/icons/GitHub';
import Tooltip from '@material-ui/core/Tooltip';
import Zoom from '@material-ui/core/Zoom';
import Link from '@material-ui/core/Link';

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: '100%',flexGrow: 1,},cardGrid: {
    paddingTop: theme.spacing(2),media: {
    height: 340,button: {
    margin: theme.spacing(1),arrow: {
    color: theme.palette.common.black,tooltip: {
    backgroundColor: theme.palette.common.black,icons: {
    '& > .fab': {
      marginRight: theme.spacing(4),margin: '1rem 0',}));

function TwoCard(props) {
  const classes = useStyles();

  React.useEffect(() => {
    const node = loadCSS(
      'https://use.fontawesome.com/releases/v5.12.0/css/all.css',document.querySelector('#font-awesome-css')
    );

    return () => {
      node.parentNode.removeChild(node);
    };
  },[]);

  return (
    <>
      <Grid item xs={12} sm={6}>
        <Card>
          <CardActionArea>
            <CardMedia
              className={classes.media}
              image={props.card.image}
              title='Contemplative Reptile'
            />
            <CardContent className={classes.content}>
              <Typography gutterBottom variant='h5' component='h2'>
                {props.card.project}
              </Typography>
              <Typography variant='subtitle1' gutterBottom>
                {props.card.framework}
              </Typography>
              <Typography gutterBottom variant='body2' component='p'>
                {props.card.description}
              </Typography>
              <Box className={classes.icons}>
                <Typography gutterBottom variant='subtitle2'>
                  TOOLS USED
                </Typography>

                <Tooltip
                  TransitionComponent={Zoom}
                  arrow
                  title='REACT'
                  aria-label='react'
                >
                  <Icon className='fab fa-react fa-3x' color='primary' />
                </Tooltip>
                <Tooltip
                  TransitionComponent={Zoom}
                  arrow
                  title='HTML5'
                  aria-label='add'
                >
                  <Icon className='fab fa-html5 fa-3x' color='primary' />
                </Tooltip>
                <Tooltip
                  TransitionComponent={Zoom}
                  arrow
                  title='CSS3'
                  aria-label='add'
                >
                  <Icon className='fab fa-css3 fa-3x' color='primary' />
                </Tooltip>
              </Box>
            </CardContent>
          </CardActionArea>
          <CardActions>
            <Button variant='outlined' size='small' color='primary'>
              <Link
                href={props.card.projectUrl}
                target='_blank'
                rel='noopener noreferrer'
                className={classes.links}
                underline='none'
                color='inherit'
              >
                View Project
              </Link>
            </Button>
            <Button
              variant='outlined'
              size='small'
              color='primary'
              className={classes.button}
              endIcon={<GitHubIcon />}
            >
              <Link
                href={props.card.githubUrl}
                target='_blank'
                rel='noopener noreferrer'
                underline='none'
                color='inherit'
              >
                Code
              </Link>
            </Button>
          </CardActions>
        </Card>
      </Grid>
    </>
  );
}

export default TwoCard;

这是使用该Card组件的代码：

import React from "react";
import Grid from "@material-ui/core/Grid";
import Card from "./Card.js";
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  headings: {
    padding: "20px 0"
  }
}));

function Projects(props) {
  const classes = useStyles();
  let cards = props.data.map((card,i) => {
    return <Card card={card} key={i} />;
  });

  return (
    <>
      <Typography variant="h4" gutterBottom>
        Featured Projects
      </Typography>
      <Grid container spacing={2}>
        {cards}
      </Grid>
      <Typography variant="h4" className={classes.headings}>
        Other Projects of note
      </Typography>
      <Grid container spacing={2}>
        {cards}
      </Grid>
    </>
  );
}

export default Projects;

解决方法

您可以将prop传递到Card组件，以控制它是两栏还是三栏。例如，您可以传递maxColumns道具并以以下方式使用它：

      <Grid item xs={12} sm={6} lg={maxColumns > 2 ? 4 : undefined}>

然后您的Projects组件可以传递prop（在我的示例中，我将maxColumns默认设置为2，因此在这种情况下无需指定该属性）：

import React from "react";
import Grid from "@material-ui/core/Grid";
import Card from "./Card.js";
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  headings: {
    padding: "20px 0"
  }
}));

function Projects(props) {
  const classes = useStyles();
  let twoColumnCards = props.data.map((card,i) => {
    return <Card card={card} key={i} />;
  });
  let threeColumnCards = props.data.map((card,i) => {
    return <Card maxColumns={3} card={card} key={i} />;
  });

  return (
    <>
      <Typography variant="h4" gutterBottom>
        Featured Projects
      </Typography>
      <Grid container spacing={2}>
        {twoColumnCards}
      </Grid>
      <Typography variant="h4" className={classes.headings}>
        Other Projects of note
      </Typography>
      <Grid container spacing={2}>
        {threeColumnCards}
      </Grid>
    </>
  );
}

export default Projects;