私はModalComponentを所有している親を持って近く

Question

に状態を破壊するためにコンポーネントを教える：

render(){ 
return (
    <MyCustomModal 
    visible={this.state.displayModal} 
    //various properties 
    /> 
); 
} 

MyCustomModalは状態を持っている、MyCustomModal.myStateを言います。保存/キャンセルをクリックすると、MyCustommodal.myStateをnullにリセットします。現在、私はこれを処理する関数を持っています：

export function clearFields(){ 
    //called by onCancel to setState to null 
} 

私はこのclearFields（）を管理するのが難しいと考えています。私は自分で国家を管理する必要がないような方法で子供の状態をリセットできますか？

つまり、コンポーネントのライフサイクルに突き当たり、取り外すように指示する方法がありますか？

Answer 1

親コンポーネントのレンダリング方法で子コ​​ンポーネントをマウントまたはマウント解除する必要があるかどうかを判断できます。レンダリングメソッドが呼び出されると、仮想DOMが作成され、そのコンポーネントの実際の既存の仮想DOMと（存在する場合）比較され、変更が見つかった場合、それらは適切な（マウントまたはアンマウントの子要素またはその小道具を変えるなど）。

したがって、レンダリング方法で条件付きで子をレンダリングすることができます。子がすでにマウントされていてアンマウントする必要がある場合、その "componentWillUnmount"メソッドが呼び出され、そこで必要なクリーンアップコードを実行できます。

例えば次のコードブロック（または、このjsfiddle）を見

var World = React.createClass({ 
    componentWillUnmount: function() { 
    alert('This component is unmounting'); 
    }, 
    render: function() { 
    return (<span> World! < /span>); 
    }, 
    }); 

var Hello = React.createClass({ 
    _handleClick: function() { 
    this.setState({ 
     showChild: false 
    }); 
    }, 
    getInitialState: function() { 
    return { 
     showChild: true, 
    }; 
    }, 
    render: function() { 
    var childNode = null; 
    if (this.state.showChild) 
     childNode = (< World/>); 
    return <div > Hello { 
     childNode 
    } < button onClick = { 
     this._handleClick 
    } > Click < /button></div > ; 
    } 
}); 

ReactDOM.render(< Hello/> , 
    document.getElementById('container') 
);