Значение должно быть установлено для логических атрибутов с помощью Typescript и Material UI - PullRequest
Новая
       5

Значение должно быть установлено для логических атрибутов с помощью Typescript и Material UI

0 голосов
/ 18 мая 2019

У меня есть довольно простая копия и вставка кода из Material UI, который я пытаюсь заставить работать с Typescript. У меня есть компонент MediaCard (переименован в DisplayCard).

Когда я компилирую код, я получаю эту ошибку: (34,23): Value must be set for boolean attributes.

У меня возникают трудности с выяснением источника этой ошибки, поскольку я не уверен, какое значение атрибута необходимо установить ...

Вот код:

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

1 Ответ

0 голосов
/ 18 мая 2019

Я думаю, что это относится к этой строке <Typography gutterBottom variant='h5' component='h2'>.

Когда вы устанавливаете атрибут, такой как gutterBottom, он выводится как gutterBottom={true}.Поскольку вы используете TypeScript, боги злятся на вас за то, что вы не были явными, поэтому попробуйте явно установить атрибут. 

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

Надеюсь, это устранит ошибку.

...