在 react 中制作 Material UI 卡片模板

Question

我正在尝试使用 Material UI 在 React 中制作卡片模板。我需要这个模板，以便将来可以轻松生成更多卡片。文档通常将脚本放在一个文件中，并且从不解释如何将其分开并且仍然可以工作。 我不会在这里使用导出导入行来简化代码。

假设我有一个 Cardtemplate.jsx

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  subtitle: {
    fontSize: 14,
  },
  card:{
    height: 100,
  }
  title:{
    fontSize: 12,
  }
});




const Cardtemplate = ({ classes, image, title, subtitle }) => {
  
  return (
    
      <Card className={classes.card}>
        <CardMedia image={image} />
         <Typography className={classes.title} variant={'h2'}>{title}</Typography>
          <Typography className={classes.subtitle}>{subtitle}</Typography>
        </Card>
   
  );
};

export default Cardemplate;

那我想用寺庙生成card1.jsx

export default function Card1() {
  const classes = useStyles();

  return (
    <Cardtemplate
      classes={styles}
      title={'Some title'}
      subtitle={'some subtitle'}
      image={'image.png'}
    />
  );
} 

最后在 App.js 中，我会像这样渲染所有卡片。

function App(){
  return(
   <Card1 />
   <Card2 />
   <Card3 />
   ...
   ...
 )
};

问题是我收到 syntaxError 告诉 Identifier 'useStyles' 已被声明 或缺少一些未定义的属性。我试图将 const classes = useStyles(); 放在 cardTemplate.jsx 中。

我还尝试将 const useStyles 包装在 const Cardtemplate 函数 中，以确保 useStyles 也被导出，但是我得到的只是错误。 我在这里一直缺少一些东西。我怎样才能以正确的方式做到这一点而不会出现任何进一步的错误？

Answer 1

你的CardTemplate 不应该从道具接收classes，它应该在上面声明，使用上面定义的useStyles，所以它应该看起来像这样：

const useStyles = makeStyles({
  // style
});

export default function CardTemplate({ title, subtitle }) {
  const classes = useStyles();

  return (
    <Card className={classes.card}>
      <Typography className={classes.title} variant={"h2"}>
        {title}
      </Typography>
      <Typography className={classes.subtitle}>{subtitle}</Typography>
    </Card>
  );
}

然后，您可以让每个 Cards 导入此组件并重用，例如：

// Card1.js
export default () => {
  return <CardTemplate title="Card 1" subtitle="The First" />;
};

// Card2.js
export default () => {
  return <CardTemplate title="Card 2" subtitle="The Second" />;
};

// Card3.js
export default () => {
  return <CardTemplate title="Card 3" subtitle="The Third" />;
};

最后，您可以在任何您认为合适的地方渲染它们，例如：

ReactDOM.render(
  <>
    <Card1 />
    <Card2 />
    <Card3 />
  </>,
  document.querySelector("#root")
);

我为您制作了一个运行代码沙箱。 You can check it here!