¿Cómo forzar el montaje en componentes React?

Digamos que tengo un componente de vista que tiene una representación condicional:

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 se parece a esto:

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

Digamos employed es verdad. Cada vez que lo cambio a falso y la otra vista se procesa, solo unemployment-duration se reinicializa. También unemployment-reason se precarga con el valor de job-title (si se dio un valor antes de que cambiara la condición).

Si cambio el marcado en la segunda rutina de renderizado a algo como esto:

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

Parece que todo funciona bien. Parece que React simplemente no logra diferenciar ‘puesto de trabajo’ y ‘razón de desempleo’.

Por favor dime que estoy haciendo mal…

Cambia la clave del componente.

<Component key="1" />

<Component key="2" />

El componente se desmontará y se montará una nueva instancia de Componente ya que la clave ha cambiado.

editar: Documentado en Probablemente no necesite un estado derivado:

Cuando cambia una clave, React creará una nueva instancia de componente en lugar de actualizar la actual. Las claves generalmente se usan para listas dinámicas, pero también son útiles aquí.

Lo que probablemente sucede es que React piensa que solo uno MyInput (unemployment-duration) se agrega entre los renders. Como tal, el job-title nunca es reemplazado por el unemployment-reasonque también es la razón por la que se intercambian los valores predefinidos.

Cuando React hace la diferencia, determinará qué componentes son nuevos y cuáles son antiguos en función de su key propiedad. Si no se proporciona dicha clave en el código, generará la suya propia.

La razón por la que funciona el último fragmento de código que proporciona es porque React esencialmente necesita cambiar la jerarquía de todos los elementos bajo el padre. div y creo que eso desencadenaría una nueva representación de todos los niños (por eso funciona). ¿Habías agregado el span hacia abajo en lugar de hacia arriba, la jerarquía de los elementos anteriores no cambiaría y esos elementos no se volverían a representar (y el problema persistiría).

Esto es lo que el oficial Reaccionar documentación dice:

La situación se vuelve más complicada cuando los elementos secundarios se mezclan (como en los resultados de búsqueda) o si se agregan nuevos componentes al principio de la lista (como en los flujos). En estos casos en los que la identidad y el estado de cada elemento secundario deben mantenerse en los pases de procesamiento, puede identificar de forma única a cada elemento secundario asignándole una clave.

Cuando React reconcilie a los niños con llave, se asegurará de que cualquier niño con llave sea reordenado (en lugar de aplastado) o destruido (en lugar de reutilizado).

Debería poder solucionar esto proporcionando un único key elemento usted mismo a cualquiera de los padres div o a todos MyInput elementos.

Por ejemplo:

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

O

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

Ahora, cuando React haga la diferencia, verá que el divs son diferentes y lo volverán a renderizar incluyendo todos sus hijos (primer ejemplo). En el segundo ejemplo, la diferencia será un éxito en job-title y unemployment-reason ya que ahora tienen claves diferentes.

Por supuesto, puede usar las claves que desee, siempre que sean únicas.

Actualización Agosto 2017

Para una mejor comprensión de cómo funcionan las claves en React, recomiendo leer mi respuesta a Comprender las claves únicas en React.js.

Actualización noviembre 2017

Esta actualización debería haberse publicado hace un tiempo, pero al usar literales de cadena en ref ahora está en desuso. Por ejemplo ref="job-title" ahora debería ser ref={(el) => this.jobTitleRef = el} (por ejemplo). Consulte mi respuesta a la advertencia de desuso usando this.refs para obtener más información.

Usar setState en su opinión para cambiar employed propiedad del estado. Este es un ejemplo del motor de renderizado 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>
        );
    }
}

Estoy trabajando en Crud para mi aplicación. Así es como lo hice Obtuve Reactstrap como mi dependencia.

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

Algunos React Hooks allí