所以我收到了一个对我来说没有意义的错误，也许是因为我制作的第一个 ReactJS 应用程序，但以下内容在我的 navbar.js 文件的第 69 行

 { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }

当我运行代码时，我得到

Line 69:  Nested block is redundant  no-lone-blocks

我不明白我打算如何按照新标准对上述内容进行编码，有人可以建议并解释新逻辑与旧逻辑有何不同吗？

我的完整导航栏代码

    import React from 'react';
import { Link } from "react-router-dom";
import PropTypes from 'prop-types';
import Container from '@material-ui/core/Container';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Fab from '@material-ui/core/Fab';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
      },
      menuButton: {
        marginRight: theme.spacing(2),
      },
      fab: {
        position: 'absolute',
        background:'red',
        bottom: theme.spacing(2),
        right: theme.spacing(2),
        "&:hover, &:focus":{
          background:'black',
        }
      },
      tab:
      { 
       backgroundColor: "#b71c1c",
       color: "#fff",
       fontSize:'4em',
       fontWeight:"bold",
       selectedTextColor: "#ffffff",
      },
      tabLabel:
      {
          fontSize:'18px',
      },
      title: {
        flexGrow: 1,
        align:'center',
      },
}));

export default function SimpleTabs() {
  var firstTime = false;
  const classes = useStyles();
  const [icon,setIcon] = React.useState(false)

  const fabIcon = {
    color: 'white',
    fontSize: 40,
  };
  const handleClick = e => { 
    setIcon(!icon)
    { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
  }


  React.useState(() => {
    if(!firstTime)
    {
        setTimeout(function(){  document.getElementById("player").play(); }, 3000);
    }
      if(!firstTime && window.location.pathname === "/about"){
        firstTime = 1;
      }
      if(!firstTime && window.location.pathname === "/"){
        firstTime = 0;
      }
      if(!firstTime && window.location.pathname === "/programs"){
        firstTime = 2;
      }
    }
  );

  const [value, setValue] = React.useState(firstTime);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>


     <AppBar position="static" color="default" className={classes.tab}>
        <Container maxWidth="lg">
        <Tabs value={value} onChange={handleChange}
        className={classes.tab}
        variant="scrollable"
        scrollButtons="auto"
        centered
        >
          <Tab label={<span className={classes.tabLabel}>Home</span>} component={Link} to={"/"}/>
          <Tab label={<span className={classes.tabLabel}>About</span>} component={Link} to={"/about"}/>
          <Tab label={<span className={classes.tabLabel}>Shows</span>} component={Link} to={"/programs"}/>
          <Tab label={<span className={classes.tabLabel}>Events</span>} component={Link} to={"/events"}/>
          <Tab label={<span className={classes.tabLabel}>News</span>} component={Link} to={"/news"}/>
          <Tab label={<span className={classes.tabLabel}>Advertise</span>} component={Link} to={"/advertise"}/>
        </Tabs>
        </Container>
      </AppBar>
      <audio id="player">
                <source
                    src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639"
                    type="audio/mpeg"
                />
            </audio>
      <Fab aria-label='test' className={classes.fab}>
            <i className='large material-icons' style={fabIcon} onClick={handleClick}>
            { icon ? 'play_circle_outline' : 'pause_circle_outline'}</i>
          </Fab>
    </div>
  );

}