Question

在组件中，我希望存储中的变量等于一个函数才能使用它。

我这样创建函数：

makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
}));

它是Material-ui的函数。

我在我的商店中得到了这样的价值：

this.state = {
  classes: makeStyles()
};

因此，我希望可以像this.state.classes.root这样使用它，但是我不起作用（它可以编译，但是不起作用）

那是我的代码：

import React, { Component } from "react";
import { makeStyles } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import Typography from "@material-ui/core/Typography";

makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
}));

class Navbar extends Component {
  constructor() {
    super();

    this.state = {
      classes: makeStyles()
    };
  }

  render() {
    return (
      <div className={this.state.classes.root}>
        <AppBar position="static">
          <Toolbar className="red">
            // for example, here i would like to use it like: this.state.classes.root
            <div className="blue">
              <IconButton edge="start" color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
            </div>
            <div className="green">
              <Button color="inherit">Login</Button>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    access_token: state.access_token
  };
};

export default withRouter(connect(mapStateToProps)(Navbar));

代替

 <Toolbar className="red">

我想要：

<Toolbar className={this.state.classes.root}>

我应该怎么做？

Answer 1

要使用JavaScript值，您可以这样做：

<Toolbar className={this.state.classes.root}>

Answer 2

通过将代码更改为以下内容进行检查：（更改用大写字母注释）

import React, { Component } from "react";
import { makeStyles } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import Typography from "@material-ui/core/Typography";

// INITIALIZE THE makeStyles INTO ANOTHER VARIABLE, HERE I USED useStyles
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
}));

class Navbar extends Component {
  constructor() {
    super();
    // NOW CALL useStyles IN THE state
    this.state = {
      classes: useStyles()
    };
  }

  render() {
    return (
      <div className={this.state.classes.root}>
        <AppBar position="static">
          <Toolbar className="red">
            // for example, here i would like to use it like: this.state.classes.root
            <div className="blue">
              <IconButton edge="start" color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
            </div>
            <div className="green">
              <Button color="inherit">Login</Button>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    access_token: state.access_token
  };
};

export default withRouter(connect(mapStateToProps)(Navbar));

如果在实施解决方案时遇到任何问题，请发表评论。

Answer 3

我建议使用Material-UI样式Hook API。这是他们的简短示例：

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

您的代码如下所示。注意，我已经将其转换为功能组件，以便可以使用Hooks。

import React, { Component } from "react";
import { makeStyles } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  }
});

function NavBar({access_token}) {
  const classes = useStyles();

  render() {
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar className="red">
            <div className={classes.root}>
              <IconButton edge="start" color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
            </div>
            <div className="green">
              <Button color="inherit">Login</Button>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    access_token: state.access_token
  };
};

export default withRouter(connect(mapStateToProps)(Navbar));

Answer 4

这不起作用，因为您将this.state.classes.root的值分配给了className，我想您打算将其分配给style？

如何将函数存储到存储变量中？

4 个答案: