makeStyles()수명주기 메서드와 함께 구성 요소 를 사용하려고 할 때마다 아래 오류가 발생 합니다.
잘못된 후크 호출입니다. 후크는 함수 구성 요소의 본문 내에서만 호출 할 수 있습니다. 이는 다음 이유 중 하나로 인해 발생할 수 있습니다.
- React와 렌더러 (예 : React DOM)의 버전이 일치하지 않을 수 있습니다.
- 후크 규칙을 위반할 수 있습니다.
- 동일한 앱에 둘 이상의 React 사본이있을 수 있습니다.
다음은이 오류를 생성하는 코드의 작은 예입니다. 다른 예에서는 하위 항목에도 클래스를 할당합니다. 다른 사용 방법을 보여주고 makeStyles수명주기 방법을 사용할 수있는 기능이있는 MUI 문서에서 아무것도 찾을 수 없습니다 .
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;
답변
안녕하세요, 후크 API를 사용하는 대신 여기 에서 언급 한 고차 컴포넌트 API를 사용해야 합니다.
클래스 구성 요소에 대한 필요에 맞게 설명서의 예제를 수정하겠습니다.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
const styles = theme => ({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
class HigherOrderComponent extends React.Component {
render(){
const { classes } = this.props;
return (
<Button className={classes.root}>Higher-order component</Button>
);
}
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HigherOrderComponent);
답변
withStyles대신 사용makeStyle
예 :
import { withStyles } from '@material-ui/core/styles';
import React, {Component} from "react";
const useStyles = theme => ({
root: {
flexGrow: 1,
},
});
class App extends Component {
render() {
const { classes } = this.props;
return(
<div className={classes.root}>
Test
</div>
)
}
}
export default withStyles(useStyles)(App)
답변
우리가, 클래스 구성 요소와 생성 기능 컴포넌트를 사용 중지하고 결국 사용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;
답변
useStyles 기능적 구성 요소에서 사용하기위한 React 후크이며 클래스 구성 요소에서는 사용할 수 없습니다.
후크를 사용하면 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다.
또한 useStyles후크 를 호출해야 과 같이 함수 내에서 .
function Welcome() {
const classes = useStyles();
...
후크를 사용하려면 다음은 기능적 구성 요소로 변경된 간단한 클래스 구성 요소입니다.
import React from "react";
import { Container, makeStyles } from "@material-ui/core";
const useStyles = makeStyles({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px"
}
});
function Welcome() {
const classes = useStyles();
return (
<Container className={classes.root}>
<h1>Welcome</h1>
</Container>
);
}
export default Welcome;
? on ↓ CodeSandBox ↓
답변
클래스 구성 요소에 또 다른 솔루션을 사용할 수 있습니다. 기본 MUI 테마 속성을 MuiThemeProvider로 재정의하기 만하면됩니다. 이렇게하면 다른 메서드에 비해 더 많은 유연성이 제공됩니다. 부모 구성 요소 내에서 둘 이상의 MuiThemeProvider를 사용할 수 있습니다.
간단한 단계 :
- MuiThemeProvider를 클래스 구성 요소로 가져옵니다.
- createMuiTheme를 클래스 구성 요소로 가져옵니다.
- 새로운 테마 만들기
- MuiThemeProvider 및 사용자 지정 테마로 스타일을 지정할 대상 MUI 구성 요소를 래핑합니다.
자세한 내용은이 문서를 확인하십시오 :
https://material-ui.com/customization/theming/
import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
const InputTheme = createMuiTheme({
overrides: {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
}
});
class HigherOrderComponent extends React.Component {
render(){
const { classes } = this.props;
return (
<MuiThemeProvider theme={InputTheme}>
<Button className={classes.root}>Higher-order component</Button>
</MuiThemeProvider>
);
}
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default HigherOrderComponent;답변
클래스를 함수로 변환하는 대신 쉬운 단계는 ‘클래스’를 사용하는 구성 요소에 대한 jsx를 포함하는 함수를 만드는 것입니다. 귀하의 경우에는 <container></container>이 함수를 render () 클래스의 반환 내에서 호출하십시오. 태그로. 이런 식으로 클래스에서 함수로 후크를 이동합니다. 그것은 나를 위해 완벽하게 작동했습니다. 제 경우에는 <table>외부의 TableStmt 함수로 이동하고 렌더링 내부 에서이 함수를 다음과 같이 호출했습니다.<TableStmt/>
답변
