ReactJS-子コンポーネントがアンマウントされない

Question

いくつかの機能を共有するために、別のコンポーネントで構成できるラッパーコンポーネントを作成しました。基本的にラッパーコンポーネントは、新しいDOMNODEを作成し、そのようにその小道具から子コンポーネントをレンダリング：<AnotherThing />のインスタンスの

//wrapper 
componentDidMount() { 
    this.node = document.body.appendChild(document.createElement('div')); 
} 

componentDidUpdate() { 
    if (this.state.editing) { 
    ReactDOM.render(this.props.component, this.node); 
    } else { 
    ReactDOM.unmountComponentAtNode(this.node) 
    } 
} 

//component from within the props of the wrapper above 
componentWillUnmount() { /* runs */ } 

render() { 
    return (
    <div> 
     <AnotherThing /> 
    </div> 
); 
} 

しかしcomponentWillUnmount()がトリガされません。これはデフォルトですか、私はここで間違っていますか？サブツリー内のすべてのコンポーネントに対してcomponentWillUnmount()がトリガーされると思います。

この

UPDATEはすべてそれが必要として働いています。私の時計プロセスが機能しなくなったので、アンマウントが見えませんでした。

Answer 1

あなたはあなたが今それをやっているより簡単にしたいことを達成することができます。

あなたのレンダリング機能は、次のようになります。

render() { 
    return (
    <div> 
     { this.state.editing ? this.props.component : null } 
    </div> 
) 
} 

renderあなたの状態やあなたの小道具が変化しているときに実行されますので、あなたは、あなたが達成したいものを達成するために別のライフサイクルメソッドは必要ありません。 Reactはthis.props.componentのマウントとアンマウントを処理します。