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

Question

我是 React 新手，正在尝试利用 Semantic-ui-react。我按照安装说明 React和 Semantic UI React ，但每次我尝试从 Semantic-ui-react 添加任何元素时，都会在开发控制台/浏览器中收到以下错误(请参阅详细屏幕截图的链接，并在下面引用):

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 元素之一时，它返回未定义。

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

repo :https://github.com/LATAEVIA/SS-Artistpage

包.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"

索引.html

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

索引.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文件导入。