Semantic-UI-React 요소로 인해 내 기본 Reactjs 애플리케이션을 손상시키는 원인은 무엇입니까?

Question

저는 React를 처음 사용하고 Semantic-ui-react를 활용하려고합니다. React 및 Semantic UI React을 설치하기위한 지침을 따랐지만 Semantic-ui-react에서 요소를 추가 할 때마다 개발 콘솔/브라우저에서 다음 오류 (상세한 스크린 샷 및 아래 인용문 참조)가 표시됩니다.

요소 유형이 올바르지 않습니다. 문자열 (기본 제공 구성 요소의 경우) 또는 클래스/기능 (복합 구성 요소의 경우)이 있어야하지만 가져 오기 : 정의되지 않았습니다. 구성 요소를 정의한 파일에서 내보내는 것을 잊었을 가능성이 높습니다.

App의 렌더링 방법을 확인하십시오. 페이지에 오류 메시지의

이

스크린 샷

콘솔에서 오류 메시지의 스크린 샷

나는의 console.log 하나의 의미-UI-반응 요소 가져 오기 후 , 정의되지 않은 값을 반환합니다.

Semantic-ui-react 요소를 제거하지만 JSX를 유지하면 오류가 해결됩니다. React와 Semantic UI React를 모두 재설치하고, 내 import/export를 두 번 확인하고, 구문을 두 번 확인했지만 문제를 찾을 수 없습니다.

REPO : 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

01,235,164

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 파일에서 가져올 수 없습니다.