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

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

我创建的函数如下所示：

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

它是来自物料界面的一个函数

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

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

所以我希望我可以像这样使用它：

this.state.classes.root

但我不工作（它编译但不工作）

这是我的密码：

import React，{Component}来自“React”；
从“@material ui/styles”导入{makeStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“react redux”导入{connect}；
从“react router dom”导入{withRouter}；
从“@material ui/core/Typography”导入排版；
makeStyles（主题=>({
根目录：{
flexGrow:1
},
标题：{
flexGrow:1
}
}));
类导航栏扩展组件{
构造函数（）{
超级（）；
此.state={
类：makeStyles（）
};
}
render（）{
返回(
//例如，在这里我想像这样使用它：this.state.classes.root
登录
);
}
}
常量mapStateToProps=状态=>{
返回{
访问令牌：state.access\u令牌
};
};
使用路由器导出默认值（connect（mapstatetops）（Navbar））；

而不是

 <Toolbar className="red">

我希望：

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

---

我应该怎么做呢？

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

---

将代码更改为： （变更以大写字母注释）

import React，{Component}来自“React”；
从“@material ui/styles”导入{makeStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“react redux”导入{connect}；
从“react router dom”导入{withRouter}；
从“@material ui/core/Typography”导入排版；
//将makeStyles初始化为另一个变量，这里我使用了useStyles
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1
},
标题：{
flexGrow:1
}
}));
类导航栏扩展组件{
构造函数（）{
超级（）；
//现在在状态中调用useStyles
此.state={
类：useStyles（）
};
}
render（）{
返回(
//例如，在这里我想像这样使用它：this.state.classes.root
登录
);
}
}
常量mapStateToProps=状态=>{
返回{
访问令牌：state.access\u令牌
};
};
使用路由器导出默认值（connect（mapstatetops）（Navbar））；

---

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

我建议使用材质UI样式。以下是他们的简短示例：

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

从“React”导入React；
从'@material ui/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
const useStyles=makeStyles({
根目录：{
背景：“线性梯度（45度，Fe6B30%，FF8E53 90%），
边界：0，
边界半径：3，
boxShadow:'0 3px 5px 2px rgba（255、105、135、3）'，
颜色：'白色'，
身高：48，
填充：“0 30px”，
},
});
导出默认函数Hook（）{
const classes=useStyles（）；
回程钩；
}

您的代码如下所示。注意，我已经将其转换为一个功能组件，因此它可以使用挂钩

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));

import React，{Component}来自“React”；
从“@material ui/styles”导入{makeStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“react redux”导入{connect}；
从“react router dom”导入{withRouter}；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles({
根目录：{
flexGrow:1
},
标题：{
flexGrow:1
}
});
函数导航栏（{access_token}）{
const classes=useStyles（）；
render（）{
返回(
登录
);
}
}
常量mapStateToProps=状态=>{
返回{
访问令牌：state.access\u令牌
};
};
使用路由器导出默认值（connect（mapstatetops）（Navbar））；

它不起作用，因为您将

this.state.classes.root

值分配给

className

，我想您是想将其分配给

style

？

无效的钩子调用。钩子只能在函数组件的主体内部调用。好的，然后您可以尝试将您的组件称为“函数组件”。函数组件是（旧的无状态组件+新的React钩子，特别是用于状态的）。@Kan但是你的代码中有

className=“this.state.classes.root”

，我刚刚编辑了它。我写错了，但错误不是这样的是的，但我的类名或myStyle不取这个值。它可以编译，但它不需要很好的值，就像默认值那么你有什么建议吗？你说使用“样式”不起作用？我将创建一个CSS类，并使用字符串值将其分配给className。

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));