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-reasonfrom 값으로 미리 채워 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 문서에 나오는 내용은 다음과 같습니다 .

하위 항목이 (검색 결과에서와 같이) 뒤섞이거나 새 구성 요소가 목록의 맨 앞에 추가되면 (스트림에서와 같이) 상황이 더 복잡해집니다. 렌더 패스에서 각 하위 항목의 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 예에서, DIFF는에 성공합니다 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" />

키가 변경되었으므로 구성 요소가 마운트 해제되고 Component의 새 인스턴스가 마운트됩니다.

편집 : 문서화 됨 아마도 파생 상태가 필요하지 않습니다 .

키가 변경되면 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 작업을하고 있습니다. 이것이 내가 한 방법입니다.

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