Что заставляет элементы Semantic-UI-React нарушать работу моего базового приложения Reactjs?

Я новичок в 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;

person LaTaevia    schedule 12.11.2017    source источник


Ответы (1)


Заменять :

import { Button, Icon, Header, Container  } from 'semantic-ui-css/semantic.min.css';

By:

import { Button, Icon, Header, Container  } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

Действительно, компоненты не могут быть импортированы из файла css.

person Abdennour TOUMI    schedule 12.11.2017
comment
Спасибо, это именно то, что мне нужно! - person LaTaevia; 12.11.2017