如何在 React 中调用常量值

Question

我是 React 的新手.JS，我目前正在与 Node 一起使用，并且遇到了以下问题：我正在使用来自Mateal-UI的按钮（Google的界面资产 - 按钮，菜单等），并且我在通过函数运行的const中定义了按钮的样式（因为这是在他们自己的网站中声明的方式，我不确定为什么我需要一个函数而不仅仅是调用const）。我正在做的是自定义我正在导入的按钮的边距，并在浏览器的预定义按钮上将显示为“无”，使其消失。我在一个名为 HookApi 的组件中插入了带有样式值的 const.js这是它的内容：import React, { useState } from 'react';import '../App.css';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';const useStyles = makeStyles((theme) => ({    root: {      '& > *': {        margin: theme.spacing(1),      },    },    input: {      display: 'none',    },  }));  export function UploadButtons() {    const classes = useStyles();}这就是我在我的画廊里.js（正在替换我的应用程序.js用于测试目的）import React, { useState } from 'react';import './App.css';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';import HookApi from './constants/HookApi';import { classes } from './constants/HookApi';class Gallery extends React.Component{    constructor(props) {        super(props);      }    render() {        return(            <div className={classes.root}>                <input                accept="image/*"                className={classes.input}                id="contained-button-file"                multiple                type="file"                />                <label htmlFor="contained-button-file">                <Button variant="contained" color="primary" component="span">                    Upload                </Button>                </label>            </div>        );    }}export default Gallery;我不确定我是否在我的图库中以错误的方式导入了const.js但是当我呈现页面时，它会给我以下错误“类”不是从“HookApi”导出的 - 图像

Answer 1

您可以尝试导出函数，而不是导出 。const

图库.js

import UploadButtons from './constants/HookApi';

render() {

    const {input} = this.props.UploadButtons();

    //...other logic

    (<input

       accept="image/*"

       className={input}

       id="contained-button-file"

       multiple

       type="file"

    />)

  }

}