Czy można ponownie montować tylko nowe komponenty potomne na etapie zmiany routera reagowania

Question

Używam routera reagowania w mojej aplikacji i szukam sposobu na zatrzymanie remontowania komponentów, które są już w DOM. Na przykład, jeśli jestem pod adresem URL dashboard, będę mieć skojarzony DashboardComponent zamontowany. Po przejściu na dashboard/settings mój DashboardComponent oraz SettingsComponent zostają ponownie zamontowane w DOM. Chciałbym znaleźć czysty sposób montowania tylko dzieci z bieżącego adresu URL. Czy to jest możliwe?

Router

import { Component, createFactory, PropTypes } from 'react' 
import { Route, RouteHandler, DefaultRoute, NotFoundRoute } from 'react-router' 

import Home from '../components/Home' 
import Dashboard from '../components/Dashboard' 
import ViewPlayers from '../components/clubs/ViewPlayers' 

let route = createFactory(Route), 
    handler = createFactory(RouteHandler), 
    root = createFactory(DefaultRoute), 
    pageNotFound = createFactory(NotFoundRoute), 
    Transitions = createFactory(require('react/lib/ReactCSSTransitionGroup')); 

class App extends Component { 

    constructor() { 

     super(); 
    } 

    render() { 

     return (
      Transitions({transitionName: 'fade'}, 
       handler({key: this.context.router.getCurrentPath()}) 
      ) 
     ) 
    } 
} 
App.contextTypes = { 
    router: PropTypes.func 
}; 

let Router = (
    route({path: '/', name: 'home', handler: App}, 
     root({handler: Home}), 
     route({path: 'dashboard', name: 'dashboard', handler: Dashboard}, 
      route({path: 'players', name: 'players', handler: ViewPlayers}), 
     ) 
    ) 
); 
export { Router }; 

Panel (element nadrzędny)

import React from 'react' 
import { RouteHandler, Link } from 'react-router' 
import { _, div } from './Html' 

export default 
class Dashboard extends React.Component { 

    constructor() { 

     super(); 

     this.state = {} 
    } 

    componentWillMount() { 

     console.log('mounted') 
    } 

    componentWillUnmount() { 

    } 

    render() { 

     return (
      div({}, 
       _(Link)({to: 'players'}), 
       _(RouteHandler)({}) 
      ) 
     ) 
    } 
} 

Uwaga:_ tylko opakowującym React.createFactory()

Answer 1

React zawsze odmontowuje i przełączany w tryb komponenty, gdy zmienia się key - taki jest cel tej właściwości, aby pomóc React zachować "tożsamość" składnik. W szczególności jest to wymagane podczas używania przejść CSS React, ponieważ jedynym sposobem na animowanie jednego komponentu i animowanie w innym jest posiadanie oddzielnych węzłów DOM.

Ponieważ przechodzą {key: this.context.router.getCurrentPath()} składnikowi handler wewnątrz App, React odmontowuje i zamontować moduł handler, nawet jeśli jest to ten sam typ, za każdym razem getCurrentPath() zwraca inną wartość. Rozwiązaniem byłoby znalezienie klucza, który zmienia się, gdy chcesz animować, ale pozostaje taki sam w przeciwnym razie.