Reactjs 如何重用代码包装材料UI'；在改变列数的情况下使用网格？

我希望标题为“其他值得注意的项目”下的第二个网格块映射为3列网格。如何在不创建新组件的情况下执行此操作？Material UI使用

网格项xs={12}sm={6}

控制它的列，在3列网格上，我需要它读取为

网格项xs={12}sm={6}lg={4}

。 似乎我要复制和粘贴

组件，并对其重命名以实现此目的。我想避免这样。演示如下：

以下是我当前

卡
组件的代码：

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;

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;

您可以将道具传递给
卡
组件，以控制道具是两列还是三列。例如，您可以传递一个
maxColumns
prop并按以下方式使用它：

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

您可以将道具传递给
卡
组件，以控制道具是两列还是三列。例如，您可以传递一个
maxColumns
prop并按以下方式使用它：

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

这太好了。真的很高兴打开一个工作版本。另外，感谢您在中编辑和粘贴我的代码。我不清楚这方面的最佳做法。祝你一切顺利，这太棒了。真的很高兴打开一个工作版本。另外，感谢您在中编辑和粘贴我的代码。我不清楚这方面的最佳做法。祝你一切顺利。