Question

我是新来的学习反应的人，我试图理解钩子，但始终保持对钩子规则的了解。

我有一个正在构建的应用程序，它的左侧导航栏带有单击时打开模式的图标：

我现在正在尝试使用this codesandbox作为示例（来自this堆栈溢出答案）来设置“模态包装器”以包含每个模态，但是我遇到了钩子规则出现问题并解开。

我一直在here文档中阅读有关范围挂钩的知识，并且了解仅在顶层和函数中调用挂钩的理论，但是由于我的代码中有很多挂钩，在应该在哪里调用钩子以及如何链接回钩子之间感到困惑。

我对classes与functions的使用也有些困惑，因为我要遵循的示例使我们成为一个类，并且习惯于使用函数进行编码。

我当前的代码如下：

import React, { Component } from 'react'
import { Router, Link } from "react-router-dom";
import Modal from "react-modal";
import { createBrowserHistory } from 'history'
import { useAuth0 } from "@auth0/auth0-react";
import LogoutButton from "../Logout-Button";
import LoginButton from "../Login-Button";
import { Nav } from "react-bootstrap";

import Auth0ProviderWithHistory from '../../auth0-provider-with-history'

import UserSettings from "./UserSettings";
import Dashboard from "./Dashboard/Dashboard";
import MEMsLine from "./MemsLine";
import MEMsGrid from "./MemsGrid";
import Copyright from "../Copyright";

import clsx from 'clsx'
import { makeStyles } from '@material-ui/core/styles'
import {
    CssBaseline,
    Drawer,
    Box,
    AppBar,
    Toolbar,
    List,
    Divider,
    IconButton,
    Container,
    ListItem,
    ListItemText,
    ListItemIcon,
} from '@material-ui/core'
import {
    ArrowBackIos as ArrowBackIcon,
    Menu as MenuIcon,
    Dashboard as DashboardIcon,
    History as MEMsIcon,
    People as PeopleIcon,
    Place as PlaceIcon,
    Cake as EventIcon,
    LibraryMusic as MusicIcon,
    Tv as TVIcon,
    LocalMovies as MovieIcon,
    SportsEsports as GameIcon,
    Timeline as MEMslineIcon,
    Settings as SettingsIcon,
} from '@material-ui/icons'

const history = createBrowserHistory();

const drawerWidth = 200

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
    },
    toolbar: {
        paddingRight: 24, // keep right padding when drawer closed
    },
    toolbarIcon: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: '0 8px',
        ...theme.mixins.toolbar,
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    menuButton: {
        marginRight: 36,
    },
    menuButtonHidden: {
        display: 'none',
    },
    title: {
        flexGrow: 1,
    },
    drawerPaper: {
        position: 'relative',
        whiteSpace: 'nowrap',
        backgroundColor: 'black',
        color: 'white',
        width: drawerWidth,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    drawerPaperClose: {
        overflowX: 'hidden',
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        paddingLeft: '8px',
        width: theme.spacing(7),
        [theme.breakpoints.up('sm')]: {
            width: theme.spacing(9),
        },
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
        flexGrow: 1,
        height: '100vh',
        overflow: 'auto',
    },
    container: {
        paddingTop: theme.spacing(4),
        paddingBottom: theme.spacing(4),
    },
    paper: {
        padding: theme.spacing(2),
        display: 'flex',
        overflow: 'auto',
        flexDirection: 'column',
    },
    fixedHeight: {
        height: 240,
    },
    navLink: {
        textDecoration: 'none',
        color: 'inherit',
    },
    appBarImage: {
        maxHeight: '75px',
        marginLeft: '-40px',
        paddingRight: '20px',
    },
    personIcon: {
        background: '#000000',
        display: 'flex',
        flexDirection: 'row',
    },
}))

class UserAccount extends Component {

    state = {
        loginOpened: false,
        signupOpened: false
    };

    openModal = modalType => () => {
        if (modalType === "login") {
            this.setState({
                loginOpened: true,
                signupOpened: false
            });
        } else if (modalType === "signup") {
            this.setState({
                loginOpened: false,
                signupOpened: true
            });
        }
    };

    closeModal = modalType => () => {
        if (modalType === "login") {
            this.setState({
                loginOpened: false
            });
        } else if (modalType === "signup") {
            this.setState({
                signupOpened: false
            });
        }
    };

    render() {
        const { loginOpened, signupOpened } = this.state;

        const classes = useStyles()
        const [open, setOpen] = React.useState(false)

        const handleDrawerOpen = () => {
            setOpen(true)
        }

        const handleDrawerClose = () => {
            setOpen(false)
        }

        const AuthNav = () => {
            const { isAuthenticated } = useAuth0();

            return (
                <Nav className="justify-content-end">
                    {isAuthenticated ? <LogoutButton /> : <LoginButton />}
                </Nav>
            );
        };

        return (
            // <AuthConsumer>
            //   {({ user }) => (
            //     <Can
            //       role={user.role}
            //       perform="useraccount:visit"
            //       yes={() => (
            <Router history={history}>
                <Auth0ProviderWithHistory>
                    <div className={classes.root}>
                        <CssBaseline />
                        <AppBar style={{ background: '#000000' }}
                            position="absolute"
                            className={clsx(classes.appBar, open && classes.appBarShift)}
                        >
                            <Toolbar className={classes.toolbar}>
                                <IconButton
                                    edge="start"
                                    color="inherit"
                                    aria-label="open drawer"
                                    onClick={handleDrawerOpen}
                                    className={clsx(
                                        classes.menuButton,
                                        open && classes.menuButtonHidden
                                    )}
                                >
                                    <MenuIcon />
                                </IconButton>
                                <Link to="/" className={classes.navLink}>
                                    <img
                                        className={classes.appBarImage}
                                        src='https://storage.googleapis.com/mems-images/mems-logo-small-rounded.png'
                                        alt="mems logo"
                                    />
                                </Link>
                                <div className={classes.personIcon} style={{ width: '100%', justifyContent: 'flex-end' }}>
                                    <AuthNav />
                                </div>
                            </Toolbar>
                        </AppBar>
                        <Drawer
                            variant="permanent"
                            classes={{
                                paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
                            }}
                            open={open}
                        >
                            <div className={classes.toolbarIcon}>
                                <IconButton onClick={handleDrawerClose}>
                                    <ArrowBackIcon style={{ color: 'white' }} />
                                </IconButton>
                            </div>

                            <Divider />
                            <List>
                                <ListItem button>
                                    <ListItemIcon>
                                        <SettingsIcon style={{ color: 'white' }} />
                                        <UserSettings />
                                    </ListItemIcon>
                                    <ListItemText primary="Settings" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <DashboardIcon style={{ color: 'white' }} />
                                        <Dashboard />
                                    </ListItemIcon>
                                    <ListItemText primary="Dashboard" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MEMslineIcon style={{ color: 'white' }} />
                                        <MEMsLine />
                                    </ListItemIcon>
                                    <ListItemText primary="MEMsLine" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MEMsIcon style={{ color: 'white' }} />
                                        <MEMsGrid />
                                    </ListItemIcon>
                                    <ListItemText primary="All MEMs" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <EventIcon style={{ color: 'white' }} />
                                        <p>Events</p>
                                    </ListItemIcon>
                                    <ListItemText primary="Events" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <PeopleIcon style={{ color: 'white' }} />
                                        <p>People</p>
                                    </ListItemIcon>
                                    <ListItemText primary="People" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <PlaceIcon style={{ color: 'white' }} />
                                        <p>Places</p>
                                    </ListItemIcon>
                                    <ListItemText primary="Places" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MusicIcon style={{ color: 'white' }} />
                                        <p>Music</p>
                                    </ListItemIcon>
                                    <ListItemText primary="Music" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MovieIcon style={{ color: 'white' }} />
                                        <p>Movies</p>
                                    </ListItemIcon>
                                    <ListItemText primary="Movies" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <TVIcon style={{ color: 'white' }} />
                                        <p>TV Shows</p>
                                    </ListItemIcon>
                                    <ListItemText primary="TV Shows" />
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <GameIcon style={{ color: 'white' }} />
                                        <p>Games</p>
                                    </ListItemIcon>
                                    <ListItemText primary="Games" />
                                </ListItem>
                            </List>
                            <Divider />
                        </Drawer>
                        <main className={classes.content}>
                            <div className={classes.appBarSpacer} />
                            <Container maxWidth="lg" className={classes.container}>
                                <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
                                    <h1>Login</h1>
                                    <button onClick={this.openModal("signup")}>Open Signup</button>
                                    <button onClick={this.closeModal("login")}>Close this modal</button>
                                </Modal>
                                <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
                                    <h1>Sign Up</h1>
                                    <button onClick={this.openModal("login")}>Open Login</button>
                                    <button onClick={this.closeModal("signup")}>Close this modal</button>
                                </Modal>
                                <button onClick={this.openModal("login")}>Open Login</button>
                                <button onClick={this.openModal("signup")}>Open Signup</button>
                                <Box pt={4}>
                                    <Copyright />
                                </Box>
                            </Container>
                        </main>
                    </div>
                </Auth0ProviderWithHistory>
            </Router >
            //       )}
            //       no={() => <Redirect to="/" />}
            //     />
            //   )}
            // </AuthConsumer>
        );
    }
}

export default UserAccount

任何指针都非常欢迎！

Answer 1

我建议您尝试进一步了解React本身和/或javascript的基础知识。因此，我的建议是阅读更多内容，从简单的内容开始，然后再转到复杂的内容。

类组件应始终具有render方法，并将状态保留为属性，如以下示例所示。另外，请注意，函数切换是用 toggle = () =>{}而不是toggle = () => () =>{} <-编写的，因为这意味着您要返回一个函数，而不仅仅是打开函数body（learn more about arrow functions）

    class ClassComponent extends React.Component {
      state = {
        show: false
      };
    
      toggle = () => {
        const { show } = this.state;
        this.setState({ show: !show });
      };
    
      render() {
        const { show } = this.state;
        return (
          <div>
            <span>{show ? "Show Class" : "Hide Class"}</span>
            <button onClick={this.toggle}>Click here</button>
          </div>
        );
      }
    }

一个功能组件，过去没有保持状态的可能性，但是现在可以通过React钩子来保持状态，如下面的示例所示。

    function FunctionComponent(props) {
      const [show, setShow] = React.useState(false);
      const toggle = () => setShow(!show);
      return (
        <div>
          <span>{show ? "Show Function" : "Hide Function"}</span>
          <button onClick={toggle}>Click here</button>
        </div>
      );
    }

现在，在理解了这一点之后，这就是修复代码库的方法：

您在类组件中的render方法包含钩子，这是非常规的，因为钩子可以并且只能与功能组件一起使用
您的类函数正在返回函数，而不仅仅是让函数被调用，因此当您执行this.closeModal("login")时，必须像this.closeModal("login")()一样再次调用它，然后它才能工作。

总而言之，钩子只能在功能组件中使用，它们提供了类组件具有的相同功能。您可以设置状态，列出某些生命周期方法等。由于函数组件过去仅用于呈现，现在可能做一些简单的逻辑，因此可以像使用类组件一样使用它们。

将代码沙箱与一个有效的示例链接为here。

Answer 2

通过更多地阅读和理解状态和生命周期，并对钩子做出反应，我设法弄清楚了如何使它工作。

首先，我将const classes = useStyles（）修改为const {classes} = this.props。我还简化了代码，并删除了handleDrawerOpen和handleDrawerClose。

我的最终代码如下：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import LogoutButton from "../Logout-Button";
import LoginButton from "../Login-Button";
import { Nav } from "react-bootstrap";
import Modal from "react-modal";

import Auth0ProviderWithHistory from '../../auth0-provider-with-history'

import UserSettings from "./UserSettings";
import Dashboard from "./Dashboard/Dashboard";
import MEMsLine from "./MemsLine";
import MEMsGrid from "./MemsGrid";
import Copyright from "../Copyright";

import { withStyles } from '@material-ui/core/styles'
import {
    Box,
    List,
    Divider,
    Container,
    ListItem,
    ListItemIcon,
} from '@material-ui/core'
import {
    Dashboard as DashboardIcon,
    History as MEMsIcon,
    People as PeopleIcon,
    Place as PlaceIcon,
    Cake as EventIcon,
    LibraryMusic as MusicIcon,
    Tv as TVIcon,
    LocalMovies as MovieIcon,
    SportsEsports as GameIcon,
    Timeline as MEMslineIcon,
    Settings as SettingsIcon,
} from '@material-ui/icons'

const useStyles = theme => ({
    root: {
        display: 'flex',
        flexDirection: 'column',
    },
    titleBar: {
        display: 'flex',
        width: '100%',
        alignItems: 'center',
        background: '#000000',
        position: "absolute",
    },
    titleBarImage: {
        marginLeft: '0px',
        marginTop: '7px',
        maxHeight: '75px',
        paddingRight: '20px',
    },
    mainContainer: {
        display: 'flex',
        width: '100%',
        flexDirection: 'row',
    },
    menuBar: {
        marginTop: '77px',
        position: 'relative',
        whiteSpace: 'nowrap',
        backgroundColor: 'black',
        color: 'white',
        width: '60px',
    },
    content: {
        display: 'flex',
        flexWrap: 'nowrap',
        flexGrow: 5,
        marginTop: '90px',
        height: '92vh',
        padding: '10px',
    },
    modal: {
        display: 'flex',
        flexWrap: 'nowrap',
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        flexWrap: 'nowrap',
        justifyContent: 'flex-end',
        height: '91vh',
    },
    paper: {
        padding: theme.spacing(2),
        display: 'flex',
        overflow: 'auto',
        flexDirection: 'column',
    },
    navLink: {
        textDecoration: 'none',
        color: 'inherit',
    },
    personIcon: {
        background: '#000000',
        display: 'flex',
        flexDirection: 'row',
    },
})

class UserAccount extends Component {
    state = {
        dashboardOpened: true,
        memslineOpened: false,
        memsOpened: false,
        eventsOpened: false,
        peopleOpened: false,
        placesOpened: false,
        musicOpened: false,
        moviesOpened: false,
        tvshowsOpened: false,
        gamesOpened: false,
        settingsOpened: false
    };

    openModal = modalType => () => {
        if (modalType === "dashboard") {
            this.setState({
                dashboardOpened: true,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "memsline") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: true,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "mems") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: true,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "events") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: true,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "people") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: true,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "places") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: true,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "music") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: true,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "movies") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: true,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "tvshows") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: true,
                gamesOpened: false,
                settingsOpened: false
            });
        } else if (modalType === "games") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: true,
                settingsOpened: false
            });
        } else if (modalType === "settings") {
            this.setState({
                dashboardOpened: false,
                memslineOpened: false,
                memsOpened: false,
                eventsOpened: false,
                peopleOpened: false,
                placesOpened: false,
                musicOpened: false,
                moviesOpened: false,
                tvshowsOpened: false,
                gamesOpened: false,
                settingsOpened: true
            });
        }
    };

    closeModal = modalType => () => {
        if (modalType === "dashboard") {
            this.setState({
                dashboardOpened: false
            });
        } else if (modalType === "memsline") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "mems") {
            this.setState({
                memslineOpened: false
            });
        }
        else if (modalType === "events") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "people") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "places") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "music") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "movies") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "tvshows") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "games") {
            this.setState({
                memslineOpened: false
            });
        } else if (modalType === "settings") {
            this.setState({
                memslineOpened: false
            });
        }
    };

    render() {
        const { dashboardOpened, memslineOpened, memsOpened, eventsOpened, peopleOpened, placesOpened, musicOpened, moviesOpened, tvshowsOpened, gamesOpened, settingsOpened } = this.state;
        const { classes } = this.props

        const AuthNav = () => {
            const { isAuthenticated } = useAuth0();

            return (
                <Nav className="justify-content-end">
                    {isAuthenticated ? <LogoutButton /> : <LoginButton />}
                </Nav>
            );
        };

        const modalStyle = {
            overlay: {
                position: 'absolute',
                top: '95px',
                bottom: '70px',
                left: '50%',
                marginLeft: '35px',
                marginRight: 'auto',
                transform: 'translate(-50%, -0%)',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                maxWidth: '1500px',
                border: 'none',
            },
            content: {
                position: 'absolute',
                top: '0px',
                left: '0px',
                right: '0px',
                bottom: '0px',
                background: '#fff',
                overflow: 'auto',
                WebkitOverflowScrolling: 'touch',
                padding: '10px',
                maxWidth: '1200px',
                border: 'none',
            }
        };

        return (
            <>
                <Auth0ProviderWithHistory>
                    <div className={classes.root}>
                        <div className={classes.titleBar}>
                            <Link to="/" className={classes.navLink}>
                                <img
                                    className={classes.titleBarImage}
                                    src='https://storage.googleapis.com/mems-images/mems-logo-small-rounded.png'
                                    alt="mems logo"
                                />
                            </Link>
                            <div className={classes.personIcon} style={{ width: '100%', justifyContent: 'flex-end' }}>
                                <AuthNav />
                            </div>
                        </div>

                        <div className={classes.mainContainer}>
                            <List className={classes.menuBar}>
                                <ListItem button id="dashboardIcon" style={{ backgroundColor: 'black' }}>
                                    <ListItemIcon>
                                        <DashboardIcon onClick={this.openModal("dashboard")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button id="memslineIcon" style={{ backgroundColor: 'black' }}>
                                    <ListItemIcon>
                                        <MEMslineIcon onClick={this.openModal("memsline")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MEMsIcon onClick={this.openModal("mems")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <EventIcon onClick={this.openModal("events")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <PeopleIcon onClick={this.openModal("people")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <PlaceIcon onClick={this.openModal("places")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MusicIcon onClick={this.openModal("music")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <MovieIcon onClick={this.openModal("movies")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <TVIcon onClick={this.openModal("tvshows")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <GameIcon onClick={this.openModal("games")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                                <ListItem button>
                                    <ListItemIcon>
                                        <SettingsIcon onClick={this.openModal("settings")} style={{ color: 'white' }} />
                                    </ListItemIcon>
                                </ListItem>

                            </List>
                            <Divider />
                            <div id="content" className={classes.content}>
                                <div id="modal" className={classes.modal}></div>
                                <Container maxWidth="lg" className={classes.container}>
                                    <Box pt={4}>
                                        <Copyright />
                                    </Box>
                                </Container>
                            </div>
                        </div>
                    </div>

                    <Modal
                        isOpen={dashboardOpened}
                        onRequestClose={this.closeModal("dashboard")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"dashboard"}
                    >
                        <Dashboard />
                    </Modal>

                    <Modal
                        isOpen={memslineOpened}
                        onRequestClose={this.closeModal("memsline")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"memsline"}
                    >
                        <MEMsLine />
                    </Modal>

                    <Modal
                        isOpen={memsOpened}
                        onRequestClose={this.closeModal("mems")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"mems"}
                    >
                        <MEMsGrid />
                    </Modal>

                    <Modal
                        isOpen={eventsOpened}
                        onRequestClose={this.closeModal("events")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"events"}
                    >
                        <h2>Events</h2>
                    </Modal>

                    <Modal
                        isOpen={peopleOpened}
                        onRequestClose={this.closeModal("people")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"people"}
                    >
                        <h2>People</h2>
                    </Modal>

                    <Modal
                        isOpen={placesOpened}
                        onRequestClose={this.closeModal("places")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"places"}
                    >
                        <h2>Places</h2>
                    </Modal>

                    <Modal
                        isOpen={musicOpened}
                        onRequestClose={this.closeModal("music")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"music"}
                    >
                        <h2>Music</h2>
                    </Modal>

                    <Modal
                        isOpen={moviesOpened}
                        onRequestClose={this.closeModal("movies")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"movies"}
                    >
                        <h2>Movies</h2>
                    </Modal>

                    <Modal
                        isOpen={tvshowsOpened}
                        onRequestClose={this.closeModal("tvshows")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"tv shows"}
                    >
                        <h2>TV Shows</h2>
                    </Modal>

                    <Modal
                        isOpen={gamesOpened}
                        onRequestClose={this.closeModal("games")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"games"}
                    >
                        <h2>Games</h2>
                    </Modal>

                    <Modal
                        isOpen={settingsOpened}
                        onRequestClose={this.closeModal("settings")}
                        parentSelector={() => document.querySelector('#modal')}
                        shouldFocusAfterRender={false}
                        style={modalStyle}
                        ariaHideApp={false}
                        contentLabel={"settings"}
                    >
                        <UserSettings />
                    </Modal>

                </Auth0ProviderWithHistory>
            </>
        )
    }
}

export default withStyles(useStyles)(UserAccount)

这是实现我所追求的目标的一种相对简单的方法，并且我相信可以提高代码的效率，但这是我希望的，并且我在此过程中学到了很多东西！

React.js-了解钩子及其规则

2 个答案: