Saya mendapatkan kesalahan ini setelah membuat halaman contoh Bereaksi sepele:
Kesalahan Tidak Tertangkap: Pelanggaran Invarian: _registerComponent (...): Wadah target bukan elemen DOM.
Ini kode saya:
/** @jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
Apa artinya ini?
javascript
dom
reactjs
Dan Abramov
sumber
sumber
Jawaban:
Pada saat skrip dijalankan,
document
elemen belum tersedia, karena skripscript
itu sendiri ada dihead
. Meskipun ini merupakan solusi yang valid untuk disimpan danscript
dihead
- render padaDOMContentLoaded
acara , itu lebih baik untuk menempatkan Andascript
di bagian paling bawahbody
dan membuat komponen root kediv
sebelum seperti ini:dan di
bundle.js
, hubungi:Anda harus selalu membuat yang bersarang
div
alih-alihbody
. Jika tidak, semua jenis kode pihak ketiga (Google Font Loader, plugin browser, apa pun) dapat memodifikasibody
simpul DOM ketika Bereaksi tidak mengharapkannya, dan menyebabkan kesalahan aneh yang sangat sulit dilacak dan didebug. Baca lebih lanjut tentang masalah ini.Yang menyenangkan tentang menempatkan
script
di bagian bawah adalah bahwa ia tidak akan memblokir rendering hingga skrip dimuat jika Anda menambahkan React server rendering ke proyek Anda.Pembaruan: (07 Oktober 2015 | v0.14 )
Contoh:
sumber
/index.html
/app.js
(IE9 +)
Catatan : Setelah
<script async src="..."></script>
di header memastikan bahwa browser akan mulai mengunduh bundel JavaScript sebelum konten HTML dimuat.Sumber: React Starter Kit , isomorphic-style-loader
sumber
ReactDOM.render
bukanReact.render
.defer
mungkin menjadi pilihan yang lebih baikyang fungsi siap dapat digunakan seperti ini:
Jika Anda tidak ingin menggunakan jQuery, Anda dapat menggunakan
onload
fungsi ini:sumber
DOMContentLoaded
akan lebih tepat bahkan untuk menangani daripadaload
(ini adalah apa yang menggunakan jQuery ). Anda juga dapat melakukan ini di JS denganwindow.addEventListener
, tidak perlu penangan inline dan fungsi global.$(document).ready
memecahkan masalah. Oh dan ya gunakanrender
sajarenderComponent
.tebak saja, bagaimana kalau menambahkan ke index.html berikut ini:
seperti ini:
Bagi saya itu berhasil! :-)
sumber
type="text/javascript"
bekerja dengan baik.Saya mengalami kesalahan yang sama. Ternyata disebabkan oleh kesalahan ketik sederhana setelah mengubah kode saya dari:
untuk
Perhatikan '#' yang hilang itu seharusnya
Hanya memposting kalau-kalau itu membantu orang lain mengatasi kesalahan ini.
sumber
Ya, pada dasarnya apa yang Anda lakukan benar, kecuali Anda lupa bahwa JavaScript disinkronkan dalam banyak kasus, jadi Anda menjalankan kode sebelum DOM Anda dimuat, ada beberapa cara untuk menyelesaikan ini:
1) Periksa untuk melihat apakah DOM dimuat penuh, kemudian lakukan apa pun yang Anda inginkan, Anda dapat mendengarkan DOMContentLoaded misalnya:
2) Cara paling umum adalah menambahkan tag skrip ke bagian bawah
document
(setelah tag body) Anda:3) Menggunakan
window.onload
, yang dipecat ketika seluruh halaman dimuat (img, dll)4) Menggunakan
document.onload
, yang dipecat ketika DOM siap:Bahkan ada lebih banyak opsi untuk memeriksa apakah DOM sudah siap, tetapi jawaban singkatnya adalah JANGAN menjalankan skrip apa pun sebelum Anda memastikan DOM Anda siap dalam setiap kasus ...
JavaScript bekerja bersama dengan elemen DOM dan jika tidak tersedia, akan kembali nol , dapat merusak seluruh aplikasi ... jadi selalu pastikan Anda sepenuhnya siap untuk menjalankan JavaScript sebelum melakukannya ...
sumber
Jika Anda menggunakan webpack untuk merender reaksi Anda dan menggunakan HtmlWebpackPlugin dalam reaksi Anda, plugin ini membangun index.html kosong dengan sendirinya dan menyuntikkan file js di dalamnya, sehingga tidak mengandung elemen div, karena dokumen HtmlWebpackPlugin Anda dapat membuat indeks Anda sendiri. html dan berikan alamatnya ke plugin ini, di webpack.config.js saya
dan ini adalah file index.html saya
sumber
HtmlWebpackPlugin
plugin di sini jika digunakan untuk referensi file HTML statis?Dalam kasus saya kesalahan ini disebabkan oleh reload panas, saat memperkenalkan kelas baru. Pada tahap proyek tersebut, gunakan pengamat normal untuk mengkompilasi kode Anda.
sumber
Bagi mereka yang menggunakan ReactJS.Net dan mendapatkan kesalahan ini setelah dipublikasikan:
Periksa properti file .jsx Anda dan pastikan
Build Action
diatur keContent
. Yang diaturNone
tidak akan dipublikasikan. Saya menemukan solusi ini dari jawaban SO ini .sumber
Saya mengalami pesan kesalahan yang sama / sama. Dalam kasus saya, saya tidak memiliki node DOM target yang membuat komponen ReactJS didefinisikan. Pastikan node target HTML didefinisikan dengan baik dengan "id" atau "nama" yang sesuai, bersama dengan atribut HTML lainnya (cocok untuk kebutuhan desain Anda)
sumber
mudah saja buat js HTML CSS dasar dan render skrip dari js
sumber
Ketika Anda mendapat:
Kesalahan: Kesalahan Tidak Tertangkap: Wadah target bukan elemen DOM.
Anda dapat menggunakan acara DOMContentLoaded atau memindahkan
<script ...></script>
tag Anda di bagian bawah tubuh Anda.sumber