Question

我想转换此Functional Component

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { makeStyles } 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';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

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

function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Tiket.hu
          </Typography>
          <Button color="inherit">Search</Button>
          <Button color="inherit">Basket</Button>
          <FacebookLoginButton/>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default App;

到类组件，如下所示，但出现错误。你知道出什么事了吗

import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } 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';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

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

class App extends Component {
    classes = useStyles();
    render() {
      return <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={this.classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={this.classes.title}>
              Tiket.hu
            </Typography>
            <Button color="inherit">Search</Button>
            <Button color="inherit">Basket</Button>
            <FacebookLoginButton/>
          </Toolbar>
        </AppBar>
      </div>;
    }
}

export default App;

您知道哪里出了问题吗？我应该如何进行不同的转换？

Answer 1

Material-ui MakeStyles使用挂钩模式，这在类组件内部是不允许的。
改为使用withStyles HOC。

import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
};

class App extends Component {
    const { classes }  = this.props;
    the rest of your component...
}

export default withStyles(styles)(App);

Answer 2

您必须将材料ui HOC与类组件一起使用

import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';
import { makeStyles } 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';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';
import FacebookLoginButton from "./components/FacebookLoginButton"

// import this
import { withStyles } from '@material-ui/core/styles';

// make this
const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
})

class App extends Component {
    render() {
      return <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={this.props.classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={this.props.classes.title}>
              Tiket.hu
            </Typography>
            <Button color="inherit">Search</Button>
            <Button color="inherit">Basket</Button>
            <FacebookLoginButton/>
          </Toolbar>
        </AppBar>
      </div>;
    }
}

export default withStyles(styles)(App);

Answer 3

不允许在hooks中使用Class Component。挂钩专门用于Functional Components

如何在React中将“功能组件”转换为“类组件”？

3 个答案: