React エラー: 無効な要素タイプ: コンポーネントではなく「オブジェクト」を取得するのはなぜですか?

React エラー: 無効な要素タイプ

React を使用すると、次のエラーが発生する場合があります:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.

原因

このエラーは、React が要素を表す文字列またはクラス/関数を期待しているにもかかわらず、オブジェクトを受け取った場合に発生します

解決策

指定されたコード例では、App コンポーネント内の Home コンポーネントのインポート ステートメントがエラーの原因である可能性があります。コードはコンポーネントをオブジェクトとしてインポートしようとしますが、コンポーネントはデフォルトのエクスポートとしてインポートされる必要があります。

問題を解決するには、App コンポーネントのインポート ステートメントを次のように変更します。

var About = require('./components/Home').default;

代替ソリューション

回答で述べたように、もう 1 つの潜在的な解決策は、コンポーネントのインポート ステートメントが正しい構文に準拠していることを確認することです。たとえば、Webpack では、次の構文は正しく機能します:

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

ただし、次の構文を使用するとエラーが発生する可能性があります:

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

以上がReact エラー: 無効な要素タイプ: コンポーネントではなく「オブジェクト」を取得するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。