javascript - ReactJS - Nested block is redundant no-lone-blocks? - Stack Overflow

admin管理员组

文章数量:1414613

So I am getting an error which does not make sense to me, maybe because first ReactJS app that I have made, but the following is on Line 69 in my navbar.js file

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

When I run the code I get

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

I don't understand how I am meant to code the above to the new standard, could someone please advise and explain how the new logic is different to the old?

My full navbar code

    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 ponent="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>} ponent={Link} to={"/"}/>
          <Tab label={<span className={classes.tabLabel}>About</span>} ponent={Link} to={"/about"}/>
          <Tab label={<span className={classes.tabLabel}>Shows</span>} ponent={Link} to={"/programs"}/>
          <Tab label={<span className={classes.tabLabel}>Events</span>} ponent={Link} to={"/events"}/>
          <Tab label={<span className={classes.tabLabel}>News</span>} ponent={Link} to={"/news"}/>
          <Tab label={<span className={classes.tabLabel}>Advertise</span>} ponent={Link} to={"/advertise"}/>
        </Tabs>
        </Container>
      </AppBar>
      <audio id="player">
                <source
                    src=";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>
  );

}

So I am getting an error which does not make sense to me, maybe because first ReactJS app that I have made, but the following is on Line 69 in my navbar.js file

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

When I run the code I get

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

I don't understand how I am meant to code the above to the new standard, could someone please advise and explain how the new logic is different to the old?

My full navbar code

    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 ponent="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>} ponent={Link} to={"/"}/>
          <Tab label={<span className={classes.tabLabel}>About</span>} ponent={Link} to={"/about"}/>
          <Tab label={<span className={classes.tabLabel}>Shows</span>} ponent={Link} to={"/programs"}/>
          <Tab label={<span className={classes.tabLabel}>Events</span>} ponent={Link} to={"/events"}/>
          <Tab label={<span className={classes.tabLabel}>News</span>} ponent={Link} to={"/news"}/>
          <Tab label={<span className={classes.tabLabel}>Advertise</span>} ponent={Link} to={"/advertise"}/>
        </Tabs>
        </Container>
      </AppBar>
      <audio id="player">
                <source
                    src="https://samcloud.spacial./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>
  );

}

• javascript
• reactjs

Share Improve this question Follow asked Jul 15, 2019 at 7:37 RussellHarrowerRussellHarrower 6,8402525 gold badges113113 silver badges225225 bronze badges 2

• What is icon? – Krishna Prashatt Commented Jul 15, 2019 at 7:42
• @KrishnaPrashatt looks like local state – James Commented Jul 15, 2019 at 7:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This isn't really an error per se, it's an ESLint rule - and it's simply making you aware that you are creating an unnecessary scope via { ... }.

I am inclined to agree with the linter, remove the brackets because they aren't necessary.

本文标签： javascriptReactJSNested block is redundant noloneblocksStack Overflow