Передача реквизита и стилей в функциональный компонент (React) - PullRequest
Новая
       37

Передача реквизита и стилей в функциональный компонент (React)

0 голосов
/ 05 июля 2019

Я изо всех сил пытаюсь найти правильный способ использования стилей пользовательского интерфейса материала и передать реквизиты моему функциональному компоненту.

У меня есть 

import { withStyles } from '@material-ui/core/styles';
.....

const styles = {
   media: {
     height: 0,
     paddingTop: '56.25%'
  },
};

const Article = (props, {classes}) => (
<div>
       <Card className="rounded">
            <CardMedia
                className={classes.media}
                image={props.img}
            />
            <CardContent>
                <h3 className="font-weight-bold">{props.heading}</h3>
                <p className="mb-0">
                    {props.description}
                </p>
            </CardContent>
       </Card>
</div>
);

export default withStyles(styles)(Article);

Я пытался 

const Article = (props, classes) => (
const Article = ({props, classes}) => (
const Article = ({img, heading, description, classes}) => (

он работает только с props и работает только с {classes}, но не может заставить их работать вместе.

Пожалуйста, помогите, Спасибо

Ответы [ 2 ]

1 голос
/ 05 июля 2019

Чтобы добавить к тому, что вы нашли:

Вы можете выбирать между объектом опоры или уничтожить свой реквизит.Это выглядит так: 

const Article = ({img, heading, description, classes}) => {
    ...
}

Это может быть хорошей практикой, потому что очень ясно, какие реквизиты передаются от простого чтения вашего компонента.Если вы деструктурируете свои реквизиты, вы просто ссылаетесь на них без: 

EXAMPLE.function()

вместо 

props.EXAMPLE.function()
0 голосов
/ 05 июля 2019

На самом деле выяснилось, что он передается с реквизитом, поэтому я могу получить к нему доступ вот так.

const Article = (props) => ( а также className={props.classes.media}

...