使用Material UI轮廓按钮遇指定错误，无权限改文件求解决办法

我明白你碰到的问题了——照着Material UI官方的轮廓按钮示例写代码，结果运行时弹出"Unexpected use of 'self' no-restricted-globals"的错误，还没法修改lodash.throttle/index.js文件。别担心，这个问题大多和ESLint的规则配置有关，下面给你几个可行的解决办法，顺便也帮你指出代码里的一个小问题。

先看你的相关代码 #

OutlinedButtons组件代码 #

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/@material-ui/core/styles';
import Button from '../node_modules/@material-ui/core/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function OutlinedButtons(props) {
  const {classes} = props;
  return (
    <div>
      <Button variant="outlined" className={classes.button}>
        Default
      </Button>
    </div>
  );
}

OutlinedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedButtons);

App.js代码 #

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <header className="App-header">
            { OutlinedButtons }
          </header>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

第一个要修正的小问题：组件渲染写法错误 #

你在App组件的render方法里写的{ OutlinedButtons }是不对的，这只会把组件的构造函数当成普通变量输出，不会渲染出按钮。正确的写法应该是用组件标签：

<OutlinedButtons />

修改后的App.js的render部分应该是：

render() {
  return (
    <MuiThemeProvider>
      <div className="App">
        <header className="App-header">
          <OutlinedButtons />
        </header>
      </div>
    </MuiThemeProvider>
  );
}

解决"Unexpected use of 'self'"错误的办法 #

这个错误来自ESLint的no-restricted-globals规则，它默认把self列为了禁止使用的全局变量，但lodash.throttle内部用到了self，所以触发了报错。下面是几种不用修改lodash源码的解决方式：

方法1：添加全局变量注释 #

在你的项目入口文件（比如index.js）的最顶部添加一行注释，告诉ESLintself是合法的全局变量：

/* global self */

这样ESLint就不会再针对self抛出错误了。

方法2：修改ESLint配置（推荐） #

如果你的项目是用Create React App创建的，可以直接在package.json里修改ESLint规则：
找到eslintConfig字段，添加或修改no-restricted-globals规则，把self从禁止列表中移除：

"eslintConfig": {
  "extends": "react-app",
  "rules": {
    "no-restricted-globals": ["error", "event", "fdescribe"]
  }
}

默认的react-app规则里包含了self，我们这里只保留其他禁止的变量，去掉self即可。

如果是自定义的ESLint配置（比如用.eslintrc.js或.eslintrc.json），同样在rules里修改：

{
  "rules": {
    "no-restricted-globals": ["error", "event", "fdescribe"]
  }
}

方法3：临时禁用单个文件的规则 #

如果你不想修改全局配置，可以在用到lodash.throttle的文件顶部添加注释，禁用该规则：

/* eslint-disable no-restricted-globals */

不过这种方法不推荐，因为会禁用整个文件的该规则，不如前两种精准。

总结 #

先修正App.js里的组件渲染写法，再通过上述ESLint配置的方式解决self的错误，你的Material UI轮廓按钮应该就能正常运行了。

内容的提问来源于stack exchange，提问作者Miah Thompson