ルーティング時にコンポーネントがアンマウントするのを防ぐ

Question

親コンポーネントからルーティングする際に保持する必要のある子コンポーネントがあります。 ウェブを検索し、ほとんどの回答は「反応ルータ」についてですが、「反応ルータドーム」（別名リアクタルータV4）を使用しています。 私はかなり新しく反応しました。これは、コンポーネントをアンマウントしないように、またはこのようなものにフラグを立てるのと同じように、かなり単純でなければならないと考えました。

import Home from "./home/Home"; 
import Top from "./top/Top"; 

export default class Layout extends React.Component{ 
    render(){ 
     return(
      <Router> 
       <div class="wrp"> 
        <Menu/> 
        <section class="left"> 
         <Header/> 
         <Switch> 
          <Route exact path="/" component={Home} /> 
          <Route exact path="/top" component={Top} /> 
         </Switch> 
         <Footer/> 
        </section> 
       </div> 
      </Router> 
     ); 
    } 
} 

"ホーム"コンポーネントの内部には、DOMにとどまる必要のある子コンポーネントがあります。

import React from "react"; 

import Sponsor from "./Sponsor"; 
import Feature from "./Feature"; 
import Top from "./Top"; 
import Discord from "./Discord"; 
import Middle from "./Middle"; 

export default class Home extends React.Component{ 
    render(){ 
     return(
      <section class="main_wrp"> 
       <Sponsor/> 
       <div class="bulk"> 
        <Feature/> 
        <div class="co6"> 
         <Top/> 
         <Discord/> 
        </div> 
        <Middle/> 
       </div> 
      </section> 
     ); 
    } 
} 

子コンポーネント（確執）：

import React from "react"; 

export default class Discord extends React.Component{ 

    render(){ 
     return(

      <div class="DiscordViewer"> 
       <embed height='500px'src='https://somelink.com' /> 
      </div> 
     ); 
    } 
} 

Answer 1

それを行うための1つの可能な方法は、ホームの外に<Discord\>コンポーネントを取ることです依頼ホームと子コンポーネントのコードとして

。 レイアウトでは、<Discord\>コンポーネントを作成し、それを他のすべてのコンポーネントに子として渡します。

レイアウト

export default class Layout extends React.Component{ 
    render(){ 
     let discord = <Discord/>; 
     return(
      <Router> 
       <div class="wrp"> 
        <Menu/> 
        <section class="left"> 
         <Header/> 
         <Switch> 
          <Route exact path="/" render={()=><Home>{discord}</Home>} /> 
          <Route exact path="/top" render={()=><Top>{discord}</Top>} /> 
         </Switch> 
         <Footer/> 
        </section> 
       </div> 
      </Router> 
     ); 
    } 
} 

、あなたの家のコンポーネントが

export default class Home extends React.Component{ 
    render(){ 
     return(
      <section class="main_wrp"> 
       <Sponsor/> 
       <div class="bulk"> 
        <Feature/> 
        <div class="co6"> 
         <Top/> 
         {this.props.children} 
        </div> 
        <Middle/> 
       </div> 
      </section> 
     ); 
    } 
} 

あなたはまた、代わりにそれを渡すので、それを表示するために必要なすべてのコンポーネントに名前の小道具として<Discord/>コンポーネントを渡すことができますになるだろう子コンポーネントとして。

Answer 2

コンポーネントツリーを変更しないで、親ノードから移動した後にリーフノードコンポーネント（この例ではDiscord）を保存すると、ツリーの定義に違反します。 CSSを使用してコンポーネントを単に隠したり再配置したりすることはできませんでした。ツリーの枝全体、最寄りの親からその葉ノードに至るまで、そのようにする必要があります。それはそうのように実行することができるが、これはおそらく、不要な複雑さとパフォーマンスの低下につながる：

const HomeWrapper = withRouter(props => (
    <div style={props.location.pathname !== '/' ? {display: 'none'} : {}}> 
    <Home {...props} /> 
    <div> 
)) 

<HomeWrapper /> 
<Switch> 
    <Route exact path="/top" component={Top} /> 
    <Route exact path="/other" component={OtherComponent} /> 
</Switch> 

を、あなたのコンポーネントの構造に柔軟であれば、あなたは隠しに自宅のルートのうち、あなたの不和のコンポーネントを移動することができますdiv。次に、非反応のDOM操作を使用して、外部のhidden divとHome内のdivの間で不一致を移動します。ホームコンポーネントでは、以下に示すDiscordWrapperコンポーネントをレンダリングできます。 shouldComponentUpdateからfalseを返して更新をブロックしたいと思うでしょう。 ：

<div id='discord-wrapper-external' style={{display: 'none'}}> 
    <Discord id='discord-dom-node'/> 
</div> 

class DiscordWrapper extends React.Component { 
    componentDidMount() { 
    this.el = document.getElementById('discord-dom-node') 
    document.getElementById('discord-wrapper-internal').appendChild(this.el) 
    } 
    shouldComponentUpdate() { 
    return false 
    } 
    componentWillUnmount() { 
    document.getElementById('discord-wrapper-external').appendChild(this.el) 
    } 
    render() { 
    return <div id='discord-wrapper-internal' /> 
    }