Saya tahu pertanyaan ini telah diajukan beberapa kali tetapi sebagian besar waktu, solusinya adalah menangani ini di orang tua, karena aliran tanggung jawab hanya menurun. Namun, terkadang, Anda perlu mematikan komponen dari salah satu metodenya. Saya tahu saya tidak dapat memodifikasi propsnya, dan Jika saya mulai menambahkan boolean sebagai status, itu akan mulai menjadi sangat berantakan untuk komponen sederhana. Inilah yang saya coba capai: Komponen kotak kesalahan kecil, dengan "x" untuk menutupnya. Menerima kesalahan melalui alat peraga akan menampilkannya tetapi saya ingin cara untuk menutupnya dari kodenya sendiri.
class ErrorBoxComponent extends React.Component {
dismiss() {
// What should I put here?
}
render() {
if (!this.props.error) {
return null;
}
return (
<div data-alert className="alert-box error-box">
{this.props.error}
<a href="#" className="close" onClick={this.dismiss.bind(this)}>×</a>
</div>
);
}
}
export default ErrorBoxComponent;
Dan saya akan menggunakannya seperti ini di komponen induk:
<ErrorBox error={this.state.error}/>
Di bagian Apa yang harus saya taruh di sini? , Saya sudah mencoba:
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
Yang melempar kesalahan bagus di konsol:
Peringatan: unmountComponentAtNode (): Node yang Anda coba unmount dirender oleh React dan bukan container level atas. Sebaliknya, minta komponen induk memperbarui status dan perenderannya untuk menghapus komponen ini.
Haruskah saya menyalin alat peraga yang masuk dalam status ErrorBox, dan memanipulasinya hanya secara internal?
Jawaban:
Sama seperti peringatan bagus yang Anda dapatkan, Anda mencoba melakukan sesuatu yang merupakan Anti-Pola di React. Ini adalah tidak-tidak. React dimaksudkan agar terjadi unmount dari hubungan orang tua ke anak. Sekarang jika Anda ingin seorang anak melepas dirinya sendiri, Anda dapat mensimulasikan ini dengan perubahan status pada induk yang dipicu oleh anak tersebut. biarkan saya menunjukkan kode.
ini adalah contoh yang sangat sederhana. tetapi Anda dapat melihat cara kasar untuk menyampaikan kepada orang tua suatu tindakan
Karena itu, Anda mungkin harus melalui toko (tindakan pengiriman) untuk memungkinkan toko Anda berisi data yang benar ketika akan dirender
Saya telah melakukan pesan kesalahan / status untuk dua aplikasi terpisah, keduanya melalui toko. Ini adalah metode yang disukai ... Jika Anda mau, saya dapat memposting beberapa kode tentang cara melakukannya.
EDIT: Berikut adalah cara saya mengatur sistem notifikasi menggunakan React / Redux / Typecript
Beberapa hal yang perlu diperhatikan terlebih dahulu. ini ada di skrip ketikan jadi Anda harus menghapus deklarasi tipe :)
Saya menggunakan paket npm lodash untuk operasi, dan nama kelas (alias cx) untuk penetapan nama kelas inline.
Keindahan dari penyiapan ini adalah saya menggunakan pengenal unik untuk setiap notifikasi saat tindakan membuatnya. (mis. notify_id). ID unik ini adalah a
Symbol()
. Dengan cara ini jika Anda ingin menghapus pemberitahuan apa pun kapan saja Anda bisa karena Anda tahu mana yang harus dihapus. Sistem notifikasi ini akan memungkinkan Anda menumpuk sebanyak yang Anda inginkan dan mereka akan hilang ketika animasi selesai. Saya mengaitkan ke acara animasi dan ketika selesai saya memicu beberapa kode untuk menghapus notifikasi. Saya juga menyiapkan batas waktu fallback untuk menghapus notifikasi kalau-kalau animasi callback tidak aktif.notification-actions.ts
notification-reducer.ts
app.tsx
di render dasar untuk aplikasi Anda, Anda akan membuat notifikasi
user-notification.tsx
kelas notifikasi pengguna
sumber
alih-alih menggunakan
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
coba gunakan
sumber
<div id="c1"><div id="c2"><div id="react-root" /></div></div>
. Bagaimana jika teks bagian dalamc1
diganti?Dalam kebanyakan kasus, cukup menyembunyikan elemen, misalnya dengan cara ini:
Atau Anda dapat merender / rerender / tidak merender melalui komponen induk seperti ini
Akhirnya, ada cara untuk menghapus node html, tetapi saya benar-benar tidak tahu apakah itu ide yang bagus. Mungkin seseorang yang mengetahui React dari internal akan mengatakan sesuatu tentang ini.
sumber
Saya telah mengunjungi posting ini sekitar 10 kali sekarang dan saya hanya ingin meninggalkan dua sen saya di sini. Anda bisa melepasnya secara bersyarat.
Yang harus Anda lakukan adalah menghapusnya dari DOM untuk melepasnya.
Selama
renderMyComponent = true
, komponen akan dirender. Jika Anda menyetelnyarenderMyComponent = false
, ini akan dilepas dari DOM.sumber
Ini tidak sesuai di semua situasi tetapi Anda dapat bersyarat
return false
di dalam komponen itu sendiri jika kriteria tertentu terpenuhi atau tidak.Itu tidak melepas komponen, tetapi menghapus semua konten yang dirender. Ini hanya akan berdampak buruk, dalam pikiran saya, jika Anda memiliki pendengar acara di komponen yang harus dihapus saat komponen tidak lagi diperlukan.
sumber