时间戳

首页 > 解决方案 > JavaScript 访问类函数中的类变量

javascript - JavaScript 访问类函数中的类变量

问题描述

class BlogPost extends Component{
static useStyles = makeStyles({
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  });

render() {
    return(
      <Card elevation={5} >
      <Grid container spacing={0} className={useStyles.grid_container}> /* MY QUESTION IS HERE */

      </Grid>
      </Card>
    );
   }

}

也许有人知道如何在函数“render()”中访问“useStyles”？也许静态变量不是好的选择。

标签： javascripthtmlreactjsclass

解决方案

makeStyles，返回一个钩子，该钩子旨在与功能组件一起使用，而不是与类组件一起使用。因此，您可以将您的 BlogPost 转换为功能组件，例如

const useStyles = makeStyles({
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  });
const BlogPost = () =>{
    const styles = useStyles():
    return(
      <Card elevation={5} >
      <Grid container spacing={0} className={styles.grid_container}>

      </Grid>
      </Card>
    );

}

或使用 withStyles HOC

const styles = {
    grid_container: {
      marginTop:'10px',
      flex:1,
      justifyContent:'center',
      alignItems:'center'
    },
  };

class BlogPost extends Component{

    render() {
        const { classes } = this.props;
        return(
          <Card elevation={5} >
          <Grid container spacing={0} className={classes.grid_container}> 

          </Grid>
          </Card>
        );
       }

}

export default withStyles(styles)(BlogPost);

请访问Material-UI docs了解更多详情

推荐阅读