Question

我进行了快速搜索，但是在stackoverflow中找不到相关的解决方案，但是如果我错过了，请直接将我带到那里，对不起重复。

我的问题是使用withStyles时反应路由器无法按预期工作。当您单击“主页”链接两次时，第二次显示空白页。如果我不使用“ withStyles”并将其正常导出，则它会按预期工作。

非常感谢您的回答。

请参见下面的代码。基本上，“联系人”和“关于”的其他2个文件与“首页”相同，只是名称不同。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './css/index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import { history } from './store';


ReactDOM.render((
  <Router history={history}>
    <App/>
  </Router>),
document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Contact from './Contact';
import About from './About';
import Home from './Home';
import Header from './Header';
import '../css/App.css';


class App extends Component {
  render() {
    return (
        <div>
            <Header/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" exact component={Contact} />
                <Route component={Error} />
            </Switch>
        </div>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  link: {
    margin: theme.spacing(1),
  }
}));


class Header extends Component {
  render() {
      const classes = this.props;

      return (
        <div>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link exact to="/about">About</Link>
                </li>
                <li>
                    <Link exact to="/contact">Contact</Link>
                </li>
            </ul>
        </div>
      );
  }
}

export default withStyles(useStyles)(Header);

Home.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
}));


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
    const { classes } = this.props

    return (
            <div>
              <Paper className={classes.root}>
                <Typography variant="h5" component="h3">
                  This is Home page
                </Typography>
              </Paper>
            </div>
        );
    }
}

Home.propTypes = {
    classes: PropTypes.object.isRequired
};

//just so you know I have used with both withRouter and without and its the same with 
//both 

//const HomeWithRouter = withRouter(Home);
//export default withStyles(useStyles)(HomeWithRouter);
export default withStyles(useStyles)(Home);

Answer 1

makeStyles是功能组件的钩子，您正在将类组件与HOC一起使用。

更改

x <- DF[, !(.I - 1) %% 5]
DF*(1 + x) - DF[DF[, .I - !x]]

#      A  B
#  1:  1 11
#  2:  1  1
#  3:  1  1
#  4:  1  1
#  5:  1  1
#  6:  6 16
#  7:  1  1
#  8:  1  1
#  9:  1  1
# 10:  1  1
# 11: 11 21

到

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
}));

然后更改

const styles = theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
});

到

export default withStyles(useStyles)(Home);

对Home和Header组件都执行此操作。不过，老实说，我可能只是将类转换为带有钩子的功能组件，但是无论哪种方式，您都必须使用钩子或类，但不能将两者混用。

Answer 2

如Jake所述，makeStyles是一个钩子，并且

您不能在类组件内部使用挂钩。

请参阅：https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

我相信使用钩子可以使代码比类组件更简洁，您可以在下面将您的Home组件编写为钩子：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2)
  }
}));

const Home = props => {
  const [state, setState] = React.useState({});
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          This is Home page
        </Typography>
      </Paper>
    </div>
  );
};

Home.propTypes = {
  classes: PropTypes.object.isRequired
};

export default Home;

使用withStyles

2 个答案: