时间戳

首页 > 解决方案 > 如何将函数存储到存储变量中？

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

问题描述

在一个组件中，我希望我的来自商店的变量等于一个函数才能使用它。

我这样创建我的函数：

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}>

我该怎么做呢？

标签： javascriptreactjs

解决方案

要使用 JavaScript 值，您必须这样做：

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

推荐阅读