Saya melakukan ReactDOM.render #container element(top-level) dalam fungsi componentDidMount, React tunjukkan beberapa kesalahan, Cannot read property 'rootID' of null .
Jika saya menggunakan setTimeout run ReactDOM.render, itu berhasil. (Bahkan setelah 0 ms)
Saya merasa tidak yakin, dapatkah seseorang membantu saya?
html:
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="script/lib/react.js"></script>
<script type="text/javascript" src="script/lib/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>
A.jsx & B.jsx :
var A = React.createClass({
componentDidMount: function(){
ReactDOM.render(
<B />,
document.getElementById('container')
);
},
render: function(){
return (
<div>Hello World, I'm A.</div>
)
}
});
var B = React.createClass({
render: function(){
return (
<div>Hello World, I'm B.</div>
)
}
});
aplikasi.jsx:
ReactDOM.render(
<A />,
document.getElementById('container')
);
Bisakah Anda mereproduksi masalah Anda di jsfiddle? https://jsfiddle.net/L3zn8dws/
Pertanyaan sebenarnya adalah mengapa Anda memanggil ReactDOM.render
dari dalam metode siklus hidup? Anda mencoba memasang komponen baru di simpul tempat komponen saat ini dipasang, yang tampak seperti anti-pola.
Anda harus menggunakan komponen induk root untuk mengelola komponen mana yang dirender, alih-alih mencoba me-mount ulang di root. Jika Anda benar-benar harus memiliki banyak akar React (yang seharusnya Anda memiliki alasan yang sangat bagus), Anda harus menggunakan semacam sistem pembantu untuk mengelola ini:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Jika Anda memiliki banyak akar React, atau satu akar yang terhapus seiring waktu, kami menyarankan Anda untuk selalu membuat API pembungkus Anda sendiri. Ini semua akan terlihat sedikit berbeda tergantung seperti apa sistem luar Anda. Misalnya, di Facebook kami memiliki sistem yang secara otomatis mengikat ke router transisi halaman kami untuk secara otomatis memanggil unmountComponentAtNode.
Daripada memanggil ReactDOM.render() secara langsung di mana saja, pertimbangkan untuk menulis/menggunakan perpustakaan yang akan mengelola pemasangan dan pelepasan dalam aplikasi Anda.
Ini sepertinya pola yang tidak didukung: Anda mencoba merender sesuatu ke dalam wadah yang sudah berisi komponen lain yang siklus hidupnya sedang dijalankan.
Jika Anda ingin B
muncul, sertakan <B />
dari output render A
.
Komentar yang paling membantu
Pertanyaan sebenarnya adalah mengapa Anda memanggil
ReactDOM.render
dari dalam metode siklus hidup? Anda mencoba memasang komponen baru di simpul tempat komponen saat ini dipasang, yang tampak seperti anti-pola.Anda harus menggunakan komponen induk root untuk mengelola komponen mana yang dirender, alih-alih mencoba me-mount ulang di root. Jika Anda benar-benar harus memiliki banyak akar React (yang seharusnya Anda memiliki alasan yang sangat bagus), Anda harus menggunakan semacam sistem pembantu untuk mengelola ini:
https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers
Daripada memanggil ReactDOM.render() secara langsung di mana saja, pertimbangkan untuk menulis/menggunakan perpustakaan yang akan mengelola pemasangan dan pelepasan dalam aplikasi Anda.