Как принудительно перемонтировать компоненты React?

Допустим, у меня есть компонент представления с условной визуализацией:

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 выглядит примерно так:

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

Скажем employedтак. Всякий раз, когда я переключаю его на false и другое представление отображается, только unemployment-durationповторно инициализируется. Также unemployment-reasonпредварительно заполняется значением из job-title(если значение было задано до изменения условия).

Если я изменю разметку во второй процедуре рендеринга на что-то вроде этого:

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

Вроде все нормально работает. Похоже, React просто не умеет различать «должность» и «причину безработицы».

Подскажите пожалуйста, что я делаю не так ...

Что, вероятно, происходит, так это то, что React считает, что между рендерами добавляется только один MyInput( unemployment-duration). Таким образом, job-titleникогда не заменяется на unemployment-reason, поэтому также меняются местами предопределенные значения.

Когда React выполняет сравнение, он определяет, какие компоненты новые, а какие старые, на основе их keyсвойств. Если в коде такого ключа нет, он сгенерирует свой собственный.

Причина, по которой последний предоставленный вами фрагмент кода работает, заключается в том, что React по существу должен изменить иерархию всех элементов в родительском элементе, divи я считаю, что это вызовет повторный рендеринг всех дочерних элементов (вот почему он работает). Если бы вы добавили spanэлемент внизу, а не вверху, иерархия предыдущих элементов не изменилась бы, и эти элементы не перерисовывались бы (и проблема не исчезла бы).

Вот что говорится в официальной документации React :

Ситуация усложняется, когда дочерние элементы перемещаются (как в результатах поиска) или если новые компоненты добавляются в начало списка (как в потоках). В тех случаях, когда идентичность и состояние каждого дочернего элемента должны поддерживаться на всех этапах рендеринга, вы можете однозначно идентифицировать каждого дочернего элемента, назначив ему ключ.

Когда React согласовывает дочерние элементы с ключом, он гарантирует, что любой дочерний элемент с ключом будет переупорядочен (а не уничтожен) или уничтожен (вместо повторного использования).

Вы должны иметь возможность исправить это, предоставив уникальный keyэлемент самому родительскому элементу divили всем MyInputэлементам.

Например:

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

ИЛИ

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

Теперь, когда React выполнит сравнение, он увидит, что divsони разные, и повторно отобразит его, включая всех своих дочерних элементов (1-й пример). Во 2 - ом примере, разница будет иметь успех на job-titleи unemployment-reasonтак как они теперь имеют разные ключи.

Конечно, вы можете использовать любые ключи, если они уникальны.

Обновление август 2017 г.

Чтобы лучше понять, как работают ключи в React, я настоятельно рекомендую прочитать мой ответ на тему «Понимание уникальных ключей в React.js» .

Обновление ноябрь 2017 г.

Это обновление должно было быть опубликовано некоторое время назад, но refтеперь использование строковых литералов в нем не рекомендуется. Например, ref="job-title"теперь должно быть ref={(el) => this.jobTitleRef = el}(например). См. Мой ответ на предупреждение об устаревании с помощью this.refs для получения дополнительной информации.

Измените ключ компонента.

<Component key="1" />

<Component key="2" />

Компонент будет размонтирован, и новый экземпляр Компонента будет смонтирован, так как ключ изменился.

изменить : Документировано, что вам, вероятно, не нужно производное состояние :

При изменении ключа React создаст новый экземпляр компонента, а не обновит текущий. Ключи обычно используются для динамических списков, но они также полезны здесь.

Используйте setStateв своем представлении, чтобы изменить employedсвойство состояния. Это пример движка рендеринга 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>
        );
    }
}

Я работаю над Crud для своего приложения. Вот как я это сделал. Получил Reactstrap в качестве зависимости.

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

Некоторые React Hooks там