Javascript ReactJS-嵌套块是冗余的没有单独的块？

所以我得到了一个对我来说毫无意义的错误，可能是因为我制作的第一个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>
  );

}

从“React”导入React；
从“react router dom”导入{Link}；
从“道具类型”导入道具类型；
从“@material ui/core/Container”导入容器；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Fab”导入晶圆厂；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
从“@material ui/core/Typography”导入排版；
功能选项卡容器（道具）{
返回(
{props.children}
);
}
TabContainer.propTypes={
子项：PropTypes.node.isRequired，
};
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
晶圆厂：{
位置：'绝对'，
背景：'红色'，
底部：主题。间距（2），
右：主题。间距（2），
“&：悬停，&：聚焦”：{
背景：'黑色'，
}
},
选项卡：
{ 
背景颜色：“b71c1c”，
颜色：“fff”，
字体大小：'4em'，
fontWeight：“粗体”，
已选择TextColor:#ffffff“，
},
标签：
{
字体大小：'18px'，
},
标题：{
flexGrow:1，
对齐：'居中'，
},
}));
导出默认函数SimpleTabs（）{
var firstTime=假；
const classes=useStyles（）；
const[icon，setIcon]=React.useState（false）
常数fabIcon={
颜色：'白色'，
尺寸：40，
};
常量handleClick=e=>{
设置图标（！图标）
{icon？document.getElementById（“播放器”）.play（）：document.getElementById（“播放器”）.pause（）}
}
React.useState（（）=>{
如果（！第一次）
{
setTimeout（function（）{document.getElementById（“player”）.play（）；}，3000）；
}
如果（！firstTime&&window.location.pathname==“/about”）{
第一次=1；
}
如果（！firstTime&&window.location.pathname==“/”）{
第一次=0；
}
如果（！firstTime&&window.location.pathname==“/programs”）{
第一次=2；
}
}
);
const[value，setValue]=React.useState（第一次）；
函数handleChange（事件，newValue）{
设置值（新值）；
}
返回(
{图标？'play_circle_outline'：'pause_circle_outline'}
);
}

这本身并不是一个真正的错误，而是一个-它只是让您意识到您正在通过

{…}

创建一个不必要的范围

---

我倾向于同意linter，去掉括号，因为它们不是必需的。

什么是

图标

？@KrishnaPrashatt看起来像地方政府“linter会伤害你的感情”[cit.]