React에서 \'고정 위반: 요소 유형이 유효하지 않습니다\' 오류가 발생하는 이유는 무엇입니까?

React의 잘못된 요소 유형: "불변 위반" 오류 설명

문제

React 개발자는 "잡히지 않은 오류: 불변 위반: 요소 유형이 잘못되었습니다. 문자열(내장 구성 요소의 경우) 또는 클래스/함수(복합 구성 요소의 경우)가 필요했지만 다음이 발생했습니다. 물체." 이 수수께끼 같은 오류는 React 구성 요소에 전달된 요소 유형 문제로 인해 발생합니다.

코드 예

다음 코드를 고려해보세요. 스니펫:

main.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import App from './components/App';
import About from './components/About';

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body);

About.jsx:

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';

export default class About extends React.Component {
  render() {
    return (
        <RaisedButton label="Default" />
    );
  }
};

오류 원인

이 경우 불일치로 인해 오류가 발생했습니다. main.js의 홈 구성요소에 대한 import 문에서. import MyComponent from '../comComponents/xyz.js' 대신 import {MyComponent} from '../comComponents/xyz.js'를 사용하면 오류가 발생했습니다. 가져오기 구문의 이러한 차이로 인해 React가 가져온 구성요소를 잘못 해석하여 "잘못된 요소 유형" 오류가 발생할 수 있습니다.

해결책

문제를 해결하려면 올바른 가져오기 구문이 다음과 같은지 확인하세요. 구성 요소에 사용됩니다. Webpack 환경에서 이는 다음을 사용하는 것을 의미합니다.

import MyComponent from '../components/xyz.js';

이 구문은 구성 요소를 기본 내보내기로 가져오며 이는 React 구성 요소의 예상 동작입니다.

위 내용은 React에서 \'고정 위반: 요소 유형이 유효하지 않습니다\' 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!