reactjs - 如何在 React 中将“功能组件”转换为“类组件”?
问题描述
我想转换这个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;
你知道出了什么问题吗?我应该如何进行不同的转换?
解决方案
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);
推荐阅读
- php - Elasticsearch 如何设置 top_hits 聚合结果的大小?
- ios - 与 WiFi 相比,为什么 Angular HTTP 请求在移动数据上的排队时间要长得多?
- apache-spark - 为什么单个 Broker 设置在单个主题分区而不是多个分区下表现更好
- talend - How to fix Java heap space error in Talend?
- javascript - 快照测试 react 功能组件 useSelctor hook
- json - 逻辑应用程序 - 将“YYYY-MM-DD HH:MM:SS”转换为自纪元以来的毫秒数
- azure - 在 Azure Blob 容器中创建三个文件时,如何在 Azure 数据工厂中创建事件触发器?
- xamarin - 如何在 xamarin.forms 的设备浏览器中打开缩放会议 URL?
- exception - System.Threading.Tasks.TaskCanceledException:无法访问已处置的对象。对象名称:xamarin 表单中的“MobileAuthenticatedStream”
- c# - 如何让 VS 代码支持统一语句