如何使用makeStyles设置组件样式并在Material UI中仍然具有生命周期方法?
每当我尝试使用makeStyles()
具有生命周期方法的组件时,都会出现以下错误:
无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生:
- 您可能使用了不匹配的React和渲染器版本(例如React DOM)
- 您可能正在违反挂钩规则
- 您可能在同一应用中拥有多个React副本
下面是一个产生此错误的代码的小示例。其他示例也将类分配给子项。我在MUI的文档中找不到任何显示其他使用方式makeStyles
并可以使用生命周期方法的功能。
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Container, makeStyles } from '@material-ui/core';
import LogoButtonCard from '../molecules/Cards/LogoButtonCard';
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}));
const classes = useStyles();
class Welcome extends Component {
render() {
if (this.props.auth.isAuthenticated()) {
return <Redirect to="/" />;
}
return (
<Container maxWidth={false} className={classes.root}>
<LogoButtonCard
buttonText="Enter"
headerText="Welcome to PlatformX"
buttonAction={this.props.auth.login}
/>
</Container>
);
}
}
export default Welcome;
-
我们落得这样做使用类组件和创建的功能组件被停止,利用
useEffect()
从挂钩API的生命周期方法。这使您仍然可以makeStyles()
使用生命周期方法,而无需增加制作高阶组件的复杂性。这要简单得多。例:
import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Redirect } from 'react-router-dom'; import { Container, makeStyles } from '@material-ui/core'; import LogoButtonCard from '../molecules/Cards/LogoButtonCard'; const useStyles = makeStyles(theme => ({ root: { display: 'flex', alignItems: 'center', justifyContent: 'center', margin: theme.spacing(1) }, highlight: { backgroundColor: 'red', } })); // Highlight is a bool const Welcome = ({highlight}) => { const [userName, setUserName] = useState(''); const [isAuthenticated, setIsAuthenticated] = useState(true); const classes = useStyles(); useEffect(() => { axios.get('example.com/api/username/12') .then(res => setUserName(res.userName)); }, []); if (!isAuthenticated()) { return <Redirect to="/" />; } return ( <Container maxWidth={false} className={highlight ? classes.highlight : classes.root}> <LogoButtonCard buttonText="Enter" headerText={isAuthenticated && `Welcome, ${userName}`} buttonAction={login} /> </Container> ); } } export default Welcome;
-
在Material UI中,如何覆盖选择器选择的组件样式?
2021-01-31 关注 0 浏览68 1答案
-
函数式组件有没有生命周期?为什么?
2021-01-11 关注 0 浏览312 3答案
-
react的函数式组件有没有生命周期?
2021-01-11 关注 0 浏览400 0答案
-
如何设置Material-UI的工具提示样式?
2021-01-31 关注 0 浏览116 1答案
-
如何在不使用MUIThemeProvider的情况下覆盖material-ui TextField组件的样式?
2021-01-31 关注 0 浏览66 1答案
-
函数组件中的ReactJS生命周期方法
2021-01-31 关注 0 浏览120 1答案
-
从单个文件导出的Material UI v4 makeStyles不会在刷新时保留样式
2021-01-31 关注 0 浏览115 1答案
-
我该如何在React的recompose的生命周期方法中设置setState?
2021-01-31 关注 0 浏览88 1答案
-
如何使用生命周期方法getDerivedStateFromProps而不是componentWillReceiveProps
2021-01-31 关注 0 浏览69 1答案
-
更新至material-ui@0.15.0-beta.1后,我无法使用material-ui组件
2021-01-31 关注 0 浏览62 1答案