Nextjs 和 TypeScript 中的条件渲染不起作用

问题描述

尝试有条件地渲染组件。我有一个 drawHelper 变量和一个函数来切换它是真还是假。组件是否呈现基于 drawHelper 的初始值。 （false，不渲染，true 会）。

切换功能会更改值。我用console.log(drawHelper)检查过，但是改变值不会使组件出现或消失。

我在这里遗漏了什么吗？

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Divider from '@material-ui/core/Divider';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import DashboardIcon from '@material-ui/icons/Dashboard';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles,useTheme,Theme,createStyles } from '@material-ui/core/styles';
import { User } from './User';
import { Draw } from "components/Layout/Countryballs/Draw";
const drawerWidth = 240;

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',color: '#fff',},drawer: {
      [theme.breakpoints.up('sm')]: {
        width: drawerWidth,flexShrink: 0,appBar: {
      marginLeft: drawerWidth,[theme.breakpoints.up('sm')]: {
        width: `calc(100% - ${drawerWidth}px)`,menuButton: {
      marginRight: theme.spacing(2),[theme.breakpoints.up('sm')]: {
        display: 'none',toolbar: theme.mixins.toolbar,drawerPaper: {
      width: drawerWidth,backgroundColor: theme.palette.primary.main
    },content: {
      flexGrow: 1,menuItem: {
      color: '#fff',}),);


export const Layout: React.FC<LayoutProps> = (props) => {
  const { container } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen,setMobileOpen] = React.useState(false);

  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }



// display Draw component
// 1 Create property

var drawHelper: Boolean = false;

  function toggleDraw() {
    console.log(drawHelper);
    drawHelper = !drawHelper;
  }


  const drawer = (
    <div>
      <div className={classes.toolbar} />
      <Divider />
      <List>

        {['Draw'].map((text) => (
          <ListItem button key={text} onClick={toggleDraw} className={classes.menuItem}>
            <ListItemIcon className={classes.menuItem}><DashboardIcon /></ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );
  

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" Nowrap>
            Project name
          </Typography>
          <User/>
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer} aria-label="mailBox folders">
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer // this one is for mobile
            container={container}
            variant="temporary"
            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,}}
            ModalProps={{
              keepMounted: true,// Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        
        <Hidden xsDown implementation="css">
          <Drawer // This one is for desktop
            classes={{
              paper: classes.drawerPaper,}}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <main className={classes.content}>

{/* This is where my components renders */}

      {
      drawHelper === true && (<Draw/>)
      }


        
        <div className={classes.toolbar} />
        {props.children}
      </main>
    </div>
  );
}

解决方法

代码中的变量 drawHelper 在每次渲染时都会实例化。您可能希望使用 React 的状态来确保您的 drawHelper 的值在下一次重新渲染时保留。

const [drawHelper,toggleDrawHelper] = React.useState(false)


function toggleDraw() {
  toggleDrawHelper(!drawHelper);
}