Sadece yeniden yönlendirici geçişi olan yeni çocuk bileşenlerini yeniden yüklemek mümkün mü

Question

Uygulamamda yanıt yönlendirici kullanıyorum ve DOM'da bulunan bileşenlerin remount'ını durdurmanın bir yolunu arıyorum. Örneğin, dashboard URL'sindeyseniz, ilgili bir DashboardComponent bağlanmış olacaktır. dashboard/settings'a geçtiğimde DashboardComponent ve SettingsComponent, DOM'a yeniden bağlanır. Sadece mevcut URL’nin çocuklarını yerleştirmek için temiz bir yol bulmak istiyorum. Bu mümkün mü?

Yönlendirici:

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

Tablosu (Ana bileşen):

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

Not:_

Answer 1

her dosya sistemlerinin ayrılmasını ve yeniden bağlamak için tepki React.createFactory() için bir sarıcı Bileşenleri, key değiştiğinde, React'in bir "kimliğini" korumaya yardımcı olmak için bu özelliğin amacıdır. bir bileşen. Özellikle, React'ın CSS geçişlerini kullanırken gereklidir, çünkü bir bileşeni canlandırmanın ve diğerini canlandırmanın tek yolu, bunların ayrı DOM düğümleri olmasını sağlamaktır.

Eğer App içine handler bileşene {key: this.context.router.getCurrentPath()} geçmesi nedeniyle, aynı tip olsa bile kaldırmak ve handler bileşeni remount olacak Tepki, herhangi bir zaman getCurrentPath() farklı bir değer döndürür. Çözüm, , yapmak istediğinizde değişiklik gösteren bir anahtar bulmak olacaktır, ancak aynı şekilde aynı kalır.