javascript - 如何强制重新挂载 React 组件？

Question

假设我有一个具有条件渲染的 View 组件:

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 并且呈现另一个 View 时，只有 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 只是无法区分“职位”和“失业原因”。

请告诉我我做错了什么......

Answer 1

更改组件的键。

<Component key="1" />

<Component key="2" />

由于 key 已更改，组件将被卸载，组件的新实例将被安装。

编辑:记录在You Probably Don't Need Derived State :

When a key changes, React will create a new component instance rather than update the current one. Keys are usually used for dynamic lists but are also useful here.