Пользовательский интерфейс материала - выделенная кнопка - «Неожиданное использование глобальных переменных без ограничений»

Попытка использовать выделенную кнопку из пользовательского интерфейса материала: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js

Но получаю ошибку - "Неожиданное использование глобальных объектов" self "без ограничений"

И у меня нет прав на его изменение в файле lodash.throttle / index.js.

Есть ли какое-нибудь обходное решение для этого, о котором кто-нибудь знает ?? (Это буквально просто пример кода, кстати)

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

Можете ли вы добавить еще свой код, предшествующий вызову ReactDOM.render()? Если немного погуглить, ошибка Unexpected use of 'self', похоже, связана с window.

Reed Dunkle 23.05.2018 23:06

Похоже, это может быть ошибка системы сборки. Я просто построил его с помощью Parcel, без каких-либо проблем.

Jason Warta 23.05.2018 23:08

@JasonWarta интересно. Что могло вызвать это? Я просто использую сценарий создания-реакции

Miah Thompson 23.05.2018 23:11

@ReedDunkle готово

Miah Thompson 23.05.2018 23:11

Я попробовал это с CRA прямо сейчас, и он работает. Почему вы используете импорт относительного пути для material-ui? Также почему бы вам не использовать свой компонент как <OutlinedButtons />, но вместо этого вы используете его как выражение {OutlinedButtons}?

devserkan 23.05.2018 23:22

@devserkan - это источник проблемы?

Miah Thompson 23.05.2018 23:27

Какую версию material-ui вы используете? Некоторые из ваших импортов предполагают, что вы могли смешивать версию 1.0.0 с 0.20.1. В частности, MuiThemeProvider нельзя импортировать с указанного вами пути. Правильный путь (для 1.0) должен быть '@material-ui/core/styles/MuiThemeProvider'

Jason Warta 23.05.2018 23:33

@MiahThompson может быть. Сначала исправьте часть импорта, как описано в комментарии выше или в документации, а затем используйте свой компонент как <OutlinedButtons />. Тогда посмотрим, что произойдет.

devserkan 23.05.2018 23:36

да, @devserkan, это не сработало. Спасибо хоть.

Miah Thompson 23.05.2018 23:38

Какой из них не работал? После попытки рендеринга вашего компонента, что произошло. Ошибка такая же?

devserkan 23.05.2018 23:41

@devserkan после внесения изменений да, это было то же самое.

Miah Thompson 23.05.2018 23:48

Убедитесь, что вы используете самую последнюю версию material-ui, и исправьте оператор импорта MuiThemeProvider в соответствии с моим предыдущим комментарием.

Jason Warta 23.05.2018 23:51

@JasonWarta Я добавил его и удалил старый 'material-ui', но получил: 'REACT_DEVTOOLS_GLOBAL_HOOK' не определено no-undef

Miah Thompson 23.05.2018 23:55

Послушайте предложение @JasonWarta. Обязательно используйте последнюю версию material-ui. Вот простой рабочий пример: codeandbox.io/s/j4384xp45y

devserkan 23.05.2018 23:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
14
672
0

Другие вопросы по теме