是什么导致 Semantic-UI-React 元素破坏我的基本 Reactjs 应用程序？

Question

我是 React 的新手，正在尝试使用 Semantic-ui-react。我按照说明安装 React and Semantic UI React，但在开发 console/browser 中每次我尝试从 Semantic-ui-反应：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of App.

页面错误消息的屏幕截图

控制台错误消息的屏幕截图

当我 console.log Semantic-ui-react 元素之一导入后，它 returns 未定义。

删除 Semantic-ui-react 元素，但保留 JSX 可以解决错误。我已经尝试重新安装 React 和 Semantic UI React，仔细检查了我的 imports/exports，并仔细检查了我的语法，但我找不到问题所在。

回购：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;

Answer 1

替换：

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

作者：

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

的确，无法从 css 文件中导入组件。

是什么导致 Semantic-UI-React 元素破坏我的基本 Reactjs 应用程序？

What is causing Semantic-UI-React elements to break my basic Reactjs App?

reactjs

semantic-ui-react