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

Question

在一个组件中，我希望 store 中的变量等于一个函数以便使用它。

我像这样创建我的函数：

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 ？