Mengapakah saya Mendapat Ralat \'Pelanggaran Invarian: Jenis elemen tidak sah\' dalam React?

Jenis Elemen Tidak Sah dalam Reaksi: Ralat "Pelanggaran Invarian" Dijelaskan

Masalah

Pembangun React kerap menghadapi ralat "Ralat Tidak Ditangkap: Pelanggaran Invarian: Jenis elemen tidak sah: jangkaan rentetan (untuk komponen terbina dalam) atau a kelas/fungsi (untuk komponen komposit) tetapi mendapat: objek." Ralat yang membingungkan ini berpunca daripada isu dengan jenis elemen yang dihantar kepada komponen React.

Contoh Kod

Pertimbangkan kod berikut coretan:

utama.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);

Mengenai.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" />
    );
  }
};

Punca Ralat

Dalam keadaan ini, ralat disebabkan oleh percanggahan dalam pernyataan import untuk komponen Laman Utama dalam main.js. Menggunakan import {MyComponent} daripada '../components/xyz.js' dan bukannya mengimport MyComponent daripada '../components/xyz.js' mengakibatkan ralat. Perbezaan dalam sintaks import ini boleh menyebabkan React untuk mentafsir komponen yang diimport secara salah, mengakibatkan ralat "Jenis Elemen Tidak Sah".

Penyelesaian

Untuk menyelesaikan isu, pastikan sintaks import yang betul ialah digunakan untuk komponen tersebut. Dalam persekitaran Webpack, ini bermakna menggunakan:

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

Sintaks ini mengimport komponen sebagai eksport lalai, iaitu gelagat yang dijangkakan untuk komponen React.

Atas ialah kandungan terperinci Mengapakah saya Mendapat Ralat \'Pelanggaran Invarian: Jenis elemen tidak sah\' dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!