Javascript 如何从React组件渲染样式和定义变量？

我正在设置一个createreact项目，目前正在处理身份验证部分，以便使用JWT登录用户配置文件

目前，我有问题的风格

寄存器组件

import React, { Component } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Logo from "./assets/images/logo_transparent.png";

 //redux
 import { connect } from "react-redux";
 //proptypes
 import PropTypes from "prop-types";
 import { register } from "./actions/authActions";


 const useStyles = makeStyles(theme => ({
   "@global": {
   body: {
    backgroundColor: theme.palette.common.white
    }
   },
 paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(3)
},
 submit: {
margin: theme.spacing(3, 0, 2)
}
 }));

 class Register extends Component {
  state = {

name: "",
email: "",
password: "",
msg: null
};

static propTypes = {
isAuthenticated: PropTypes.bool,
error: PropTypes.object.isRequired,
register: PropTypes.func.isRequired
};

onChange = e => {
  this.setState({ [e.target.name]: e.target.value });
 };

onSubmit = e => {
  e.preventDefault();

  const { name, email, password } = this.state;

//create user object
const newUser = {
  name,
  email,
  password
};
//attempt to register
this.props.register(newUser);
};

  render() {
const classes = useStyles();
return (
  <Container component="main" maxWidth="xs">
    <CssBaseline />
    <div className={classes.paper}>
      <Avatar
        alt="logo"
        src={Logo}
        style={{
          width: 100,
          height: 100
        }}
      />
      <Typography component="h1" variant="h5">
        NIK
      </Typography>
      <Typography component="h1" variant="h5">
        Sign up
      </Typography>
      <form className={classes.form} noValidate>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <TextField
              autoComplete="fname"
              name="fullName"
              variant="outlined"
              required
              fullWidth
              id="fullName"
              label="Full Name"
              autoFocus
            />
          </Grid>

          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
            />
          </Grid>

          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              name="password"
              label="Confirm Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
          </Grid>
          <Grid item xs={12}>
            <FormControlLabel
              control={
                <Checkbox value="allowExtraEmails" color="primary" 
                 />
              }
              label="I want to receive inspiration, marketing 
                  promotions and updates via email."
            />
          </Grid>
        </Grid>
        <Button
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
        >
          Sign Up
        </Button>
        <Button fullWidth variant="contained" color="primary">
          Home
        </Button>
        <br />
        <br />
        <Grid container justify="flex-end">
          <Grid item>
            <Link href="http://localhost:3000/" variant="body2">
              Already have an account? Sign in
            </Link>
          </Grid>
        </Grid>
      </form>
    </div>
    <Box mt={5}>
      <MadeWithLove />
    </Box>
  </Container>
);
   }
  }

const mapStateToProps = state => ({
 isAuthenticated: state.auth.isAuthenticated,
 error: state.error //getting from reducer
 });

export default connect(
 mapStateToProps,
 { register } //from redux actions
)(Register); //component

import React，{Component}来自“React”；
从“@material ui/core/Avatar”导入化身；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Container”导入容器；
从“/assets/images/Logo_transparent.png”导入徽标；
//重演
从“react redux”导入{connect}；
//道具
从“道具类型”导入道具类型；
从“/actions/authActions”导入{register}”；
const useStyles=makeStyles（主题=>({
“@global”：{
正文：{
背景色：theme.palette.common.white
}
},
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”
},
表格：{
宽度：“100%，//修复IE 11问题。
marginTop：主题。间距（3）
},
提交：{
边距：主题。间距（3,0,2）
}
}));
类寄存器扩展组件{
状态={
姓名：“，
电邮：“，
密码：“”，
msg:null
};
静态类型={
已验证：PropTypes.bool，
错误：PropTypes.object.isRequired，
寄存器：PropTypes.func.isRequired
};
onChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
onSubmit=e=>{
e、 预防默认值（）；
const{name，email，password}=this.state；
//创建用户对象
常量newUser={
名称
电子邮件，
密码
};
//试图注册
此.props.register（newUser）；
};
render（）{
const classes=useStyles（）；
返回(
尼克
注册
注册
家




已经有帐户了吗？请登录
);
}
}
常量mapStateToProps=状态=>({
isAuthenticated:state.auth.isAuthenticated，
错误：state.error//从减速器获取
});
导出默认连接(
MapStateTops，
{register}//来自redux操作
)（登记册）//成分

下面列出了错误，以供参考

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本

---

如果我删除包含classes变量的JSX元素（从useStyle中），它会工作，但样式会混乱。

您使用的是@material ui的一个实现，它使用的是React钩子（在本例中是makeStyles），它只能在React功能组件内部使用，而不是常规类组件

如果将组件更改为：

class Register extends Component {}

致：

您应该能够使用它，但是您需要更改组件内部的逻辑，因为您还需要使用

useState

而不是

this.setState

---

如果您不习惯使用@material ui或React钩子，我建议您查看文档，并使用其中指定的HOC方法。

正如它所说，“钩子只能在函数组件的主体内调用”，但您的是类组件。看

makeStyles

创建了一个钩子。感谢您的评论。这是我第一次使用@material ui，我还没有反应过来。然后我将尝试使用功能组件。

const Register = () => {}