React: Re-render elemen di componentDidMount sekaligus Error:Cannot read property 'rootID' of null.

Dibuat pada 10 Mei 2016  ·  3Komentar  ·  Sumber: facebook/react

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')
);

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

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.

Semua 3 komentar

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 .

Apakah halaman ini membantu?
0 / 5 - 0 peringkat