E 'possibile rimontare solo i nuovi componenti figlio sulla transizione react-router

Question

Sto utilizzando react-router nella mia applicazione e sto cercando un modo per fermare il remount dei componenti che sono già nel DOM. Ad esempio, se sono all'URL dashboard, allora avrò un associato DashboardComponent montato. Quando eseguo la transizione a dashboard/settings, il mio DashboardComponent e il SettingsComponent vengono rimontati nel DOM. Mi piacerebbe trovare un modo pulito per montare solo i bambini dell'URL corrente. È possibile?

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

Dashboard (componente principale):

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)({}) 
      ) 
     ) 
    } 
} 

Nota:_ è solo un wrapper per React.createFactory()

Answer 1

Reagire sempre smonta e rimonta componenti quando le sue modifiche sono key - questo è lo scopo di quella proprietà, per aiutare React a mantenere una "identità" di un componente. In particolare, è necessario quando si usano le transizioni CSS di React, perché l'unico modo per animare un componente e animare in un altro è di farli essere nodi DOM separati.

Perché si passa {key: this.context.router.getCurrentPath()} al componente handler all'interno App, Reagire sarà smontare e rimontare la componente handler, anche se è dello stesso tipo, in qualsiasi momento getCurrentPath() restituisce un valore diverso. La soluzione sarebbe quella di trovare una chiave che cambia quando si fare desidera animare, ma rimane lo stesso in caso contrario.