क्या केवल प्रतिक्रिया-राउटर संक्रमण

Question

पर केवल नए बाल घटकों को ही पुनर्स्थापित करना संभव है, मैं अपने आवेदन में प्रतिक्रिया-राउटर का उपयोग कर रहा हूं और मैं पहले से ही डोम में मौजूद घटकों के रिमोट को रोकने के लिए एक तरीका ढूंढ रहा हूं। उदाहरण के लिए, यदि मैं यूआरएल dashboard पर हूं, तो मेरे पास DashboardComponent घुड़सवार होगा। जब मैं dashboard/settings में बदलता हूं तो मेरा DashboardComponent साथ ही SettingsComponent को डोम में भेज दिया जाता है। मैं केवल वर्तमान यूआरएल के बच्चों को माउंट करने के लिए एक साफ तरीका खोजना चाहता हूं। क्या यह सकारात्मक है?

रूटर:

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

डैशबोर्ड (जनक घटक):

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

नोट:_ सिर्फ React.createFactory() के लिए एक रैपर

Answer 1

हमेशा unmounts और माउण्टों प्रतिक्रिया है घटक जब key परिवर्तन-वह उस संपत्ति का उद्देश्य है, ताकि "पहचान" को बनाए रखने में सहायता के लिए एक घटक। विशेष रूप से, प्रतिक्रिया के सीएसएस संक्रमणों का उपयोग करते समय इसकी आवश्यकता होती है, क्योंकि एक घटक को एनिमेट करने और दूसरे में एनिमेट करने का एकमात्र तरीका यह है कि उन्हें अलग डोम नोड्स होना चाहिए।

क्योंकि आप App के अंदर handler घटक को {key: this.context.router.getCurrentPath()} गुजरती हैं, प्रतिक्रिया अनमाउंट और handler घटक को पुन: माउंट होगा, भले ही वह एक ही प्रकार है, किसी भी समय getCurrentPath() एक अलग मान देता है। समाधान उस कुंजी को खोजना होगा जो को एनिमेट करना चाहते हैं, लेकिन अन्यथा रहता है।