如何强制在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（如果条件更改之前已给出值）。

如果我将第二个渲染例程中的标记更改为如下所示：

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只是无法区分'职位-头衔'和'失业原因'。

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

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