Reactjs 我是个初学者。我在类中使用钩子，程序报告错误

我是个初学者。我在类中使用钩子，程序报告错误

src\page\App.js 第41:35行：不能在类组件中调用React钩子“React.useState”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用React钩子 第44:39行：不能在类组件中调用React钩子“React.useState”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用React钩子 搜索关键字以了解有关每个错误的更多信息

这是我的密码

import './App.css';
import React from "react";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import {AccountCircle, Home, Info} from "@material-ui/icons";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Grid from "@material-ui/core/Grid";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styled from "@material-ui/core/styles/styled";


class App extends React.Component {
    render() {

        makeStyles(() => ({
            title: {
                color: "#ffffff"
            },
            toolbar: {
                background: "#3f51b5"
            },
            contents: {
                marginBottom: "100px"
            },
            bottomNavigation: {
                left: '0px',
                right: '0px',
                position: 'fixed',
                bottom: '0px',
            }
        }));
        const {classes} = this.props

        const MyGrid = styled(Grid)({
            marginTop: 10,
        });


        //切换标签选中的钩子
        const [value, setValue] = React.useState('home');

        //切换toolbar的钩子
        const [tbValue, setTbValue] = React.useState("主页");


        const handleChange = (event, newValue) => {
            setValue(newValue);
            console.log("switch" + newValue)
            //切换tb的字
            switch (newValue) {
                case 'home':
                    setTbValue("主页");
                    this.props.history.push('/home/user_login');
                    break;
                case 'info':
                    setTbValue("信息");
                    this.props.history.push('/home/info');
                    break;
                case 'me':
                    setTbValue("我的");
                    this.props.history.push('/home/me');
                    break;
            }
        };


        return (
            <div>
                <AppBar position="static" style={{left: "0", right: "0"}}>
                    <Toolbar className={classes.toolbar}>
                        <Typography className={classes.title}>
                            {tbValue}
                        </Typography>
                    </Toolbar>
                </AppBar>

                {/*内容区*/}
                <div className={classes.contents}>
                    <div>
                        <MyGrid container direction={'column'} justify={"center"}
                                alignContent={"center"}>
                            {this.props.children}
                        </MyGrid>
                    </div>
                </div>


                <BottomNavigation className={classes.bottomNavigation}
                                  value={value}
                                  onChange={handleChange} showLabels>
                    <BottomNavigationAction label="主页" value='home' icon={<Home/>}/>
                    <BottomNavigationAction label="信息" value='info' icon={<Info/>}/>
                    <BottomNavigationAction label="我的" value='me' icon={<AccountCircle/>}/>
                </BottomNavigation>

            </div>
        );
    }
}

export default App;

import'/App.css'；
从“React”导入React；
从“@material ui/core”导入{BottomNavigation，BottomNavigationAction}；
从“@material ui/icons”导入{AccountCircle，Home，Info}”；
从“@material ui/core/styles/makeStyles”导入makeStyles；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles/styled”导入样式；
类应用程序扩展了React.Component{
render（）{
makeStyles（（）=>({
标题：{
颜色：“ffffff”
},
工具栏：{
背景：“3f51b5”
},
内容：{
marginBottom：“100px”
},
底部导航：{
左：“0px”，
右：“0px”，
位置：'固定'，
底部：“0px”，
}
}));
const{classes}=this.props
const MyGrid=styled（网格）({
玛金托普：10，
});
//切换标签选中的钩子
const[value，setValue]=React.useState（'home'）；
//切换工具栏的钩子
const[tbValue，setTbValue]=React.useState（“主页");
常量handleChange=（事件，newValue）=>{
设置值（新值）；
console.log（“开关”+newValue）
//切换结核病的字
开关（新值）{
“家”案例：
setTbValue（“主页");
this.props.history.push（'/home/user_login'）；
打破
案例“信息”：
setTbValue（“信息");
this.props.history.push（'/home/info'）；
打破
“我”一案：
setTbValue（“我的");
this.props.history.push（'/home/me'）；
打破
}
};
返回(
{tbValue}
{/*内容区*/}
{this.props.children}
);
}
}
导出默认应用程序；

当我使用这个方法时，一切都是正常的

import './App.css';
import React from "react";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import {AccountCircle, Home, Info} from "@material-ui/icons";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Grid from "@material-ui/core/Grid";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styled from "@material-ui/core/styles/styled";


function App(props) {

    makeStyles(() => ({
        title: {
            color: "#ffffff"
        },
        toolbar: {
            background: "#3f51b5"
        },
        contents: {
            marginBottom: "100px"
        },
        bottomNavigation: {
            left: '0px',
            right: '0px',
            position: 'fixed',
            bottom: '0px',
        }
    }));
    const {classes} = props

    const MyGrid = styled(Grid)({
        marginTop: 10,
    });


    //切换标签选中的钩子
    const [value, setValue] = React.useState('home');

    //切换toolbar的钩子
    const [tbValue, setTbValue] = React.useState("主页");


    const handleChange = (event, newValue) => {
        setValue(newValue);
        console.log("switch" + newValue)
        //切换tb的字
        switch (newValue) {
            case 'home':
                setTbValue("主页");
                props.history.push('/home/user_login');
                break;
            case 'info':
                setTbValue("信息");
                props.history.push('/home/info');
                break;
            case 'me':
                setTbValue("我的");
                props.history.push('/home/me');
                break;
        }
    };


    return (
        <div>
            <AppBar position="static" style={{left: "0", right: "0"}}>
                <Toolbar className={classes.toolbar}>
                    <Typography className={classes.title}>
                        {tbValue}
                    </Typography>
                </Toolbar>
            </AppBar>

            {/*内容区*/}
            <div className={classes.contents}>
                <div>
                    <MyGrid container direction={'column'} justify={"center"}
                            alignContent={"center"}>
                        {props.children}
                    </MyGrid>
                </div>
            </div>


            <BottomNavigation className={classes.bottomNavigation}
                              value={value}
                              onChange={handleChange} showLabels>
                <BottomNavigationAction label="主页" value='home' icon={<Home/>}/>
                <BottomNavigationAction label="信息" value='info' icon={<Info/>}/>
                <BottomNavigationAction label="我的" value='me' icon={<AccountCircle/>}/>
            </BottomNavigation>

        </div>
    );
}

export default App;

import'/App.css'；
从“React”导入React；
从“@material ui/core”导入{BottomNavigation，BottomNavigationAction}；
从“@material ui/icons”导入{AccountCircle，Home，Info}”；
从“@material ui/core/styles/makeStyles”导入makeStyles；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles/styled”导入样式；
功能应用程序（道具）{
makeStyles（（）=>({
标题：{
颜色：“ffffff”
},
工具栏：{
背景：“3f51b5”
},
内容：{
marginBottom：“100px”
},
底部导航：{
左：“0px”，
右：“0px”，
位置：'固定'，
底部：“0px”，
}
}));
常量{classes}=props
const MyGrid=styled（网格）({
玛金托普：10，
});
//切换标签选中的钩子
const[value，setValue]=React.useState（'home'）；
//切换工具栏的钩子
const[tbValue，setTbValue]=React.useState（“主页");
常量handleChange=（事件，newValue）=>{
设置值（新值）；
console.log（“开关”+newValue）
//切换结核病的字
开关（新值）{
“家”案例：
setTbValue（“主页");
props.history.push（'/home/user_login'）；
打破
案例“信息”：
setTbValue（“信息");
props.history.push（'/home/info'）；
打破
“我”一案：
setTbValue（“我的");
props.history.push（'/home/me'）；
打破
}
};
返回(
{tbValue}
{/*内容区*/}
{props.children}
);
}
导出默认应用程序；

不允许在类组件中使用钩子。如react文档中所述：

您不能在类组件中使用钩子，但您绝对可以将类和函数组件与单个树中的钩子混合使用。组件是类还是使用钩子的函数是该组件的实现细节。从长远来看，我们希望钩子是人们编写组件的主要方式

---

链接：

react-hook用于功能组件。请参阅此链接-错误非常清楚，react-hook仅适用于我