React bileşenlerine yeniden bağlanmaya nasıl zorlanır?

Koşullu işlemeye sahip bir görünüm bileşenim olduğunu varsayalım:

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

Girdiğim şuna benzer:

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

employedDoğru olduğunu söyleyelim . Onu yanlış olarak değiştirdiğimde ve diğer görünüm işlediğinde, yalnızca unemployment-durationyeniden başlatılıyor. Ayrıca unemployment-reason, değeriyle önceden doldurulur job-title(koşul değişmeden önce bir değer verilmişse).

İkinci oluşturma rutinindeki işaretlemeyi şöyle değiştirirsem:

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

Görünüşe göre her şey yolunda gidiyor. Görünüşe göre React, "iş unvanı" ve "işsizlik nedeni" ni ayırt edemiyor.

Lütfen bana neyi yanlış yaptığımı söyle ...

Muhtemelen olan şey, React'in renderlar arasına yalnızca bir MyInput( unemployment-duration) eklendiğini düşünmesidir . Bu nedenle, job-titleasla ile değiştirilmez unemployment-reason, bu da önceden tanımlanmış değerlerin değiştirilmesinin nedenidir.

React farkı yaptığında, özelliklerine göre hangi bileşenlerin yeni ve hangilerinin eski olduğunu belirleyecektir key. Kodda böyle bir anahtar yoksa, kendi anahtarını oluşturacaktır.

Sağladığınız son kod parçacığının çalışmasının nedeni, React'in esasen ana öğenin altındaki tüm öğelerin hiyerarşisini değiştirmesi gerektiğidir ve bunun tüm alt öğelerin divyeniden oluşturulmasını tetikleyeceğine inanıyorum (bu yüzden çalışıyor). Eğer ilave olsaydı spantepe yerine, önceki unsurları olmaz değişim hiyerarşisine ve bu eleman en-işlemek yeniden olmaz (ve sorun devam ediyorum).

Resmi React belgelerinin söylediği şu:

Çocuklar karıştırıldığında (arama sonuçlarında olduğu gibi) veya listenin önüne yeni bileşenler eklendiğinde (akışlarda olduğu gibi) durum daha karmaşık hale gelir. Oluşturma geçişlerinde her bir çocuğun kimliğinin ve durumunun korunması gereken bu durumlarda, her çocuğu bir anahtar atayarak benzersiz şekilde tanımlayabilirsiniz.

React, anahtarlı çocukları uzlaştırdığında, anahtara sahip herhangi bir çocuğun yeniden sıralanmasını (yuhalanmak yerine) veya yok edilmesini (yeniden kullanmak yerine) garanti eder.

keyÜst öğeye divveya tüm MyInputöğelere kendiniz benzersiz bir öğe sağlayarak bunu düzeltebilmelisiniz .

Örneğin:

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

VEYA

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

Şimdi, React farkı yaptığında, divsfarklı olduğunu görecek ve tüm alt öğeleri dahil olmak üzere onu yeniden işleyecektir (1. örnek). 2. örnekte, fark başarılı olacaktır job-titleve unemployment-reasonartık farklı anahtarlara sahipler.

Elbette, benzersiz oldukları sürece istediğiniz herhangi bir anahtarı kullanabilirsiniz.

Ağustos 2017 Güncellemesi

React'te anahtarların nasıl çalıştığına dair daha iyi bir kavrayış için React.js'deki Benzersiz anahtarları anlama konusundaki yanıtımı okumanızı şiddetle tavsiye ederim .

Kasım 2017 güncellemesi

Bu güncelleme bir süre önce gönderilmiş olmalıydı, ancak dizide değişmez değerleri kullanmak refartık kullanımdan kaldırıldı. Örneğin ref="job-title", şimdi bunun yerine ref={(el) => this.jobTitleRef = el}(örneğin) olmalıdır. Daha fazla bilgi için this.refs'i kullanarak Kullanımdan kaldırma uyarısına verdiğim yanıta bakın .

Bileşenin anahtarını değiştirin.

<Component key="1" />

<Component key="2" />

Anahtar değiştiğinden, bileşenin bağlantısı kesilecek ve Bileşenin yeni bir örneği eklenecektir.

düzenleme : Belgelendirilmiş Muhtemelen Türetilmiş Duruma İhtiyacınız Yok :

Bir anahtar değiştiğinde, React mevcut olanı güncellemek yerine yeni bir bileşen örneği oluşturacaktır. Anahtarlar genellikle dinamik listeler için kullanılır, ancak burada da kullanışlıdır.

Durumun özelliğini setStatedeğiştirmek için kendi görünümünüzde kullanın employed. Bu, React oluşturma motorunun bir örneğidir.

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

Uygulamam için Crud üzerinde çalışıyorum. Bağımlılığım olarak Reactstrap aldım.

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

Orada bazı React Hook'ları var