Попытка использовать выделенную кнопку из пользовательского интерфейса материала: 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();
Похоже, это может быть ошибка системы сборки. Я просто построил его с помощью Parcel, без каких-либо проблем.
@JasonWarta интересно. Что могло вызвать это? Я просто использую сценарий создания-реакции
@ReedDunkle готово
Я попробовал это с CRA прямо сейчас, и он работает. Почему вы используете импорт относительного пути для material-ui? Также почему бы вам не использовать свой компонент как <OutlinedButtons />, но вместо этого вы используете его как выражение {OutlinedButtons}?
@devserkan - это источник проблемы?
Какую версию material-ui вы используете? Некоторые из ваших импортов предполагают, что вы могли смешивать версию 1.0.0 с 0.20.1. В частности, MuiThemeProvider нельзя импортировать с указанного вами пути. Правильный путь (для 1.0) должен быть '@material-ui/core/styles/MuiThemeProvider'
@MiahThompson может быть. Сначала исправьте часть импорта, как описано в комментарии выше или в документации, а затем используйте свой компонент как <OutlinedButtons />. Тогда посмотрим, что произойдет.
да, @devserkan, это не сработало. Спасибо хоть.
Какой из них не работал? После попытки рендеринга вашего компонента, что произошло. Ошибка такая же?
@devserkan после внесения изменений да, это было то же самое.
Убедитесь, что вы используете самую последнюю версию material-ui, и исправьте оператор импорта MuiThemeProvider в соответствии с моим предыдущим комментарием.
@JasonWarta Я добавил его и удалил старый 'material-ui', но получил: 'REACT_DEVTOOLS_GLOBAL_HOOK' не определено no-undef
Послушайте предложение @JasonWarta. Обязательно используйте последнюю версию material-ui. Вот простой рабочий пример: codeandbox.io/s/j4384xp45y





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