reactjs - 必须使用 Typescript 和 Material UI 为布尔属性设置值
问题描述
我有一个非常简单的从 Material UI 复制和粘贴的代码,我正在尝试使用 Typescript。我有一个MediaCard
组件(重命名为DisplayCard
)。
当我编译代码时,我收到此错误:(34,23): Value must be set for boolean attributes
.
我很难弄清楚这个错误的来源,因为我不确定需要设置哪个属性值......
这是代码:
应用程序.tsx
import * as React from "react";
import DisplayCard from "./components/DisplayCard";
const App = () => {
return <DisplayCard />;
};
export default App;
显示卡.tsx
import * as PropTypes from "prop-types";
import * as React from "react";
import { createStyles, withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
const styles = createStyles({
card: {
maxWidth: 345
},
media: {
height: 140
}
});
function DisplayCard(props: any) {
const { classes } = props;
return (
<Card className={classes.card}>
<CardActionArea>
<CardMedia
className={classes.media}
image='/static/images/cards/contemplative-reptile.jpg'
title='Contemplative Reptile'
/>
<CardContent>
<Typography gutterBottom variant='h5' component='h2'>
Lizard
</Typography>
<Typography component='p'>
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size='small' color='primary'>
Share
</Button>
<Button size='small' color='primary'>
Learn More
</Button>
</CardActions>
</Card>
);
}
DisplayCard.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(DisplayCard);
解决方案
我认为它指的是这条线<Typography gutterBottom variant='h5' component='h2'>
。
当您设置一个属性时,gutterBottom
它被推断为gutterBottom={true}
. 由于您使用的是 TypeScript,因此上帝会因为您不显式而生气,因此请尝试显式设置属性。
<Typography gutterBottom={true} variant='h5' component='h2'>
希望这将消除错误。
推荐阅读
- angular - ngx-charts 我可以设置 y 轴增量吗
- python - Python:定义类变量时可以访问哪些范围?
- css - 如何在 Angular 中使用顶部三角形的每个垫表行上的垫子对话框上创建动态自定义样式 - 材料
- .net-core - BouncyCastle ECDSA 证书包括 Order、Generator(未压缩)、Cofactor 和 Seed x509 字段?
- javascript - 我如何使用 async/await 来实现该功能?
- xaml - Xamarin 在两列中形成 CollectionView 数据在 iO 上的行中不对齐
- java - 尝试将按钮交换到某些矩形
- linux - 脚本的时间部分(运行时间)
- javascript - 使用 JS 在本地(客户端)处理上传的 JSON 文件的最佳方式
- arrays - C(指针)中几乎相同的代码的不同结果