Bagaimana cara memaksa remounting pada komponen React?

Katakanlah saya memiliki komponen tampilan yang memiliki render bersyarat:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

MyInput terlihat seperti ini:

class MyInput extends React.Component {

    ...

    render(){
        return (
            <div>
                <input name={this.props.name} 
                    ref="input" 
                    type="text" 
                    value={this.props.value || null}
                    onBlur={this.handleBlur.bind(this)}
                    onChange={this.handleTyping.bind(this)} />
            </div>
        );
    }
}

Katakanlah employeditu benar. Setiap kali saya mengalihkannya ke false dan tampilan lain merender, hanya unemployment-durationdiinisialisasi ulang. Juga unemployment-reasonakan diisi sebelumnya dengan nilai dari job-title(jika nilai diberikan sebelum kondisi berubah).

Jika saya mengubah markup dalam rutinitas rendering kedua menjadi seperti ini:

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Sepertinya semuanya bekerja dengan baik. Sepertinya React gagal membedakan 'job-title' dan 'pengangguran-reason'.

Tolong beritahu saya apa yang saya lakukan salah ...

Apa yang mungkin terjadi adalah React berpikir bahwa hanya satu MyInput( unemployment-duration) yang ditambahkan di antara render. Dengan demikian, job-titletidak pernah diganti dengan unemployment-reason, yang juga mengapa nilai yang telah ditentukan sebelumnya ditukar.

Ketika React melakukan diff, itu akan menentukan komponen mana yang baru dan mana yang lama berdasarkan keypropertinya. Jika tidak ada kunci seperti itu yang diberikan dalam kode, itu akan membuatnya sendiri.

Alasan mengapa potongan kode terakhir yang Anda berikan berfungsi adalah karena React pada dasarnya perlu mengubah hierarki semua elemen di bawah induk divdan saya yakin itu akan memicu render ulang semua anak (itulah mengapa ini berfungsi). Jika Anda menambahkan bagian spanbawah dan bukan bagian atas, hierarki elemen sebelumnya tidak akan berubah, dan elemen tersebut tidak akan dirender ulang (dan masalah akan tetap ada).

Inilah yang dikatakan dokumentasi resmi React :

Situasi menjadi lebih rumit ketika anak-anak diacak (seperti dalam hasil pencarian) atau jika komponen baru ditambahkan ke bagian depan daftar (seperti dalam aliran). Dalam kasus ini di mana identitas dan status setiap anak harus dipertahankan di seluruh render pass, Anda dapat mengidentifikasi setiap anak secara unik dengan menetapkannya sebagai kunci.

Ketika React merekonsiliasi anak-anak yang dikunci, itu akan memastikan bahwa setiap anak dengan kunci akan disusun ulang (bukan di-clobber) atau dihancurkan (bukan digunakan kembali).

Anda harus dapat memperbaikinya dengan menyediakan keysendiri elemen unik untuk induk divatau semua MyInputelemen.

Sebagai contoh:

render(){
    if (this.state.employed) {
        return (
            <div key="employed">
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div key="notEmployed">
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

ATAU

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput key="title" ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput key="reason" ref="unemployment-reason" name="unemployment-reason" />
                <MyInput key="duration" ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Sekarang, ketika React melakukan diff, itu akan melihat bahwa divsberbeda dan akan merender ulang termasuk semua anaknya (contoh pertama). Dalam contoh ke-2, diff akan berhasil job-titledan unemployment-reasonkarena mereka sekarang memiliki kunci yang berbeda.

Anda tentu saja dapat menggunakan kunci apa pun yang Anda inginkan, asalkan unik.

Perbarui Agustus 2017

Untuk pemahaman yang lebih baik tentang bagaimana kunci bekerja di React, saya sangat menyarankan membaca jawaban saya untuk Memahami kunci unik di React.js .

Perbarui November 2017

Pembaruan ini seharusnya telah diposting beberapa waktu yang lalu, tetapi menggunakan string literal refsekarang sudah tidak digunakan lagi. Misalnya ref="job-title"sekarang sebagai gantinya ref={(el) => this.jobTitleRef = el}(misalnya). Lihat jawaban saya untuk peringatan Deprecation using this.refs untuk info lebih lanjut.

Ubah kunci komponen.

<Component key="1" />

<Component key="2" />

Komponen akan dilepas dan contoh baru Komponen akan dipasang karena kunci telah berubah.

sunting : Didokumentasikan pada Anda Mungkin Tidak Perlu Status Berasal :

Ketika sebuah kunci berubah, React akan membuat sebuah instance komponen baru daripada mengupdate yang sekarang. Tombol biasanya digunakan untuk daftar dinamis tetapi juga berguna di sini.

Gunakan setStatedalam pandangan Anda untuk mengubah employedproperti negara. Ini adalah contoh mesin render React.

 someFunctionWhichChangeParamEmployed(isEmployed) {
      this.setState({
          employed: isEmployed
      });
 }

 getInitialState() {
      return {
          employed: true
      }
 },

 render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Saya sedang mengerjakan Crud untuk aplikasi saya. Ini adalah bagaimana saya melakukannya Got Reactstrap sebagai ketergantungan saya.

import React, { useState, setState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import firebase from 'firebase';
// import { LifeCrud } from '../CRUD/Crud';
import { Row, Card, Col, Button } from 'reactstrap';
import InsuranceActionInput from '../CRUD/InsuranceActionInput';

const LifeActionCreate = () => {
  let [newLifeActionLabel, setNewLifeActionLabel] = React.useState();

  const onCreate = e => {
    const db = firebase.firestore();

    db.collection('actions').add({
      label: newLifeActionLabel
    });
    alert('New Life Insurance Added');
    setNewLifeActionLabel('');
  };

  return (
    <Card style={{ padding: '15px' }}>
      <form onSubmit={onCreate}>
        <label>Name</label>
        <input
          value={newLifeActionLabel}
          onChange={e => {
            setNewLifeActionLabel(e.target.value);
          }}
          placeholder={'Name'}
        />

        <Button onClick={onCreate}>Create</Button>
      </form>
    </Card>
  );
};

Beberapa React Hooks di sana