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（条件が変更される前に値が指定された場合）。

2番目のレンダリングルーチンのマークアップを次のように変更すると、

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は 'job-title'と 'unmployment-reason'の比較に失敗したようです。

私が間違っていることを教えてください...

おそらく起こっているのは、レンダーの間に追加されるのは1つMyInput（unemployment-duration）だけであるとReactが考えていることです。そのため、job-titleはに置き換えられませんunemployment-reason。これは、事前定義された値が交換される理由でもあります。

Reactがdiffを実行すると、keyプロパティに基づいて、新しいコンポーネントと古いコンポーネントが判別されます。コードにそのようなキーが提供されていない場合は、独自のキーが生成されます。

あなたが提供する最後のコードスニペットが機能する理由は、Reactは基本的に親の下のすべての要素の階層を変更する必要があるためdivです。をspan上部ではなく下部に追加した場合、先行する要素の階層は変更されず、それらの要素は再レンダリングされません（そして問題は解決しません）。

Reactの公式ドキュメントには次のように記載されています。

子が（検索結果のように）並べ替えられたり、新しいコンポーネントが（ストリームのように）リストの先頭に追加されたりすると、状況はさらに複雑になります。レンダーパス全体で各子のIDと状態を維持する必要があるこれらの場合、キーを割り当てることにより、各子を一意に識別できます。

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が異なることがわかり、そのすべての子を含めて再レンダリングします（最初の例）。2番目の例では、差分が成功しjob-title、unemployment-reason異なるキーを持つようになりました。

もちろん、キーが一意である限り、任意のキーを使用できます。

2017年8月更新

Reactでキーがどのように機能するかをよりよく理解するために、React.jsの一意のキーを理解するための私の回答を読むことを強くお勧めします。

2017年11月更新

この更新はしばらく前に投稿されているはずですが、文字列リテラルの使用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>
  );
};

そこにいくつかの反応フック