Як примусити переробляти компоненти на 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це правда. Щоразу, коли я перемикаю його на помилковий, а інший вигляд відображається, лише 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 зробить diff, він визначить, які компоненти є новими, а які - старими, виходячи з їх 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 зробить diff, він побачить, що 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>
  );
};

Деякі реактивні гачки там