Я новичок в React и пытаюсь использовать Semantic-ui-react. Я выполнил инструкции по установке React и Semantic UI React, но я получаю следующую ошибку (подробные снимки экрана см. по ссылкам и цитата ниже) в консоли разработки / браузере каждый раз, когда я попробуйте добавить любой элемент из Semantic-ui-react:
Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен.
Проверьте метод рендеринга
App
.
Скриншот сообщения об ошибке на странице
Скриншот сообщения об ошибке в консоли
Когда я console.log
один из элементов Semantic-ui-react после импорта, он возвращает undefined.
Удаление элементов Semantic-ui-react, но сохранение JSX устраняет ошибку. Я попытался переустановить как React, так и Semantic UI React, дважды проверил свой импорт / экспорт и дважды проверил свой синтаксис, но я не могу найти проблему.
РЕПО: https://github.com/LATAEVIA/SS-Artistpage
Package.json
"dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-scripts": "1.0.17"
"react-scripts": "1.0.17",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.76.0"
Index.html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import 'semantic-ui-css/semantic.min.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
import { Button, Icon, Header, Container } from 'semantic-ui-css/semantic.min.css';
console.log(Button);
class App extends Component {
render() {
return ([
<Container>
<div key={0}>
<Header>
<img alt="Artist Image" />
<h1>Artist Name</h1>
<p>
Artist Bio
</p>
</Header>
</div>,
<div key={1}>
<h2>(Artist Name) Songs That Feel Like:</h2>
<form>
<input type="checkbox" name="mood_tags" value="Calm" /> Calm<br/>
<input type="checkbox" name="mood_tags" value="Mellow" /> Mellow<br/>
<input type="submit" value="Submit" />
<Button size='small' color='green'>
<Icon name='download' />
Download
</Button>
</form>
</div>
</Container>
]);
}
}
export default App;