reactjs - Værdi skal sættes for booleske attributter med Typescript og Material UI

Jeg har et ret simpelt copy-og-paste stykke kode fra Material UI, som jeg prøver at få til at fungere med Typescript. Jeg har en MediaCard komponent (omdøbt til DisplayCard).

Når jeg kompilerer koden, får jeg denne fejl: (34,23): Værdien skal sættes for boolske attributter.

Jeg har lidt svært ved at finde kilden til denne fejl, da jeg ikke er sikker på, hvilken attributværdi der skal sættes...

Her er koden:

App.tsx

import * as React from "react";
import DisplayCard from "./components/DisplayCard";

const App = () => {
  return <DisplayCard />;
};

export default App;

DisplayCard.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);

Svar #1

Jeg tror, det refererer til denne linje <Typography gutterBottom variant='h5' component='h2'>.

Når du sætter et attribut som gutterBottom, antages det at være gutterBottom={true}. Da du bruger TypeScript, er guderne vrede på dig for ikke at være eksplicit, så prøv at sætte attributten eksplicit.

<Typography gutterBottom={true} variant='h5' component='h2'>

Forhåbentlig vil det eliminere fejlen.

Relaterede artikler