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 の Home コンポーネントの import ステートメント内。 import MyComponent from '../components/xyz.js' の代わりに import {MyComponent} from '../components/xyz.js' を使用すると、エラーが発生しました。このインポート構文の違いにより、React がインポートされたコンポーネントを誤って解釈し、「無効な要素タイプ」エラーが発生する可能性があります。

解決策

この問題を解決するには、インポート構文が正しいことを確認してください。コンポーネントに使用されます。 Webpack 環境では、これは以下を使用することを意味します。

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

この構文は、コンポーネントをデフォルトのエクスポートとしてインポートします。これは、React コンポーネントの予期される動作です。

以上がReact で「不変違反: 要素の型が無効です」エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。