Question

我正在努力找出使用实质性UI样式并将道具传递给我的功能组件的正确方法。

我有这个

 setTimeout(function(){
        $('.success_trip_msg').slideUp();                                                                            
    }, 4000);

我尝试过

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一起使用，但不能使它们一起工作。

请帮助，谢谢

Answer 1

要添加到您发现的内容中，

您可以在道具对象之间进行选择，也可以破坏道具。看起来像这样：

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

这可能是一个好习惯，因为很明显，仅阅读您的组件会传递哪些道具。如果您破坏道具，则只需引用它们即可，例如：

EXAMPLE.function()

代替

props.EXAMPLE.function()

Answer 2

实际上发现它是随道具一起传递的，所以我可以像这样访问它。

const Article = (props) => ( 和 className={props.classes.media}

将道具和样式传递到功能组件（反应）

2 个答案: