讓ReactTransitionGroup和Redux-Simple-Router一起工作

我的同事和我正在嘗試在ReactTransitionGroup元素中包含redux-simple-router導航（我們已經工作了一段時間），以便可以在路由上調用其生命週期方法更改。我們已經嘗試了一大堆版本，但還沒有想出一個讓它工作的方法。讓ReactTransitionGroup和Redux-Simple-Router一起工作

我們目前的迭代在ReactTransitionGroup（這是Provider的孩子）下創建一個包裝，因此生命週期方法可以在可以訪問路由狀態和子節點的地方定義。這個包裝器的render和componentWillAppear方法在初始應用程序加載時（在瀏覽器中）肯定會調用，但在應用程序中的頁面之間導航時（使用Redux簡單路由器）不會。該代碼或多或少在this gist上。

最值得注意的是，我們每次嘗試使用React中的cloneElement方法和一個重新生成的密鑰（例如，通過history.createKey()），但無法獲取任何路由更改時觸發的生命週期方法。

什麼是簡單的路由器組件包裝ReactTransitionGroup與redux-simple-router？

最新通報

我已經嘗試了新的版本，我在其中包裹有自己TransitionWrapper類每個人的路線，如this second gist（由this answer啓發）。

當那個TransitionWrapper延伸React.Component（如在這個例子中），調用render方法，但沒有別的。該網站工作正常（但我不能訪問過渡鉤）。

當它延伸ReactTransitionGroup，我擊中ReactTransitionGroup對象上的performAppear方法的99線的誤差，其中的一個片段是以下：

performAppear: function (key) { 
    this.currentlyTransitioningKeys[key] = true; 

    var component = this.refs[key]; 

    if (component.componentWillAppear) { /* error here */ 
    component.componentWillAppear(this._handleDoneAppearing.bind(this, key)); 
    } else { 
    this._handleDoneAppearing(key); 
    }

Uncaught TypeError: Cannot read property 'componentWillAppear' of undefined

這得到提高，因爲this.refs是一個空物體。（key是正確的）。

值得注意的是，如果我關閉了Chrome調試器，以便跳過該錯誤，則該網站仍能正常工作。

來源

2015-12-23 Sasha

我們的解決方案是創建一個函數，返回另一個函數，該函數依次返回包裝在ReactTransitionGroup中的組件。

var transitionWrap = (component, myKey) => { 
    return() => { 
    return ( 
     <ReactTransitionGroup> 
     { React.createElement(component, { key: myKey }) } 
     </ReactTransitionGroup> 
    ) 
    } 
} 

const routeConfig = [ 
    { 
    path: "/", 
    component: AppContainer, 
    childRoutes: [ 
     { path: "/signed-out", 
     component: LoggedOut, 
     childRoutes: [ 
      { path: "/home", component: transitionWrap(Home, browserHistory.createKey())       } 
     ] 
     } 
    ] 
    } 
]; 

ReactDOM.render(
    <div> 
    <Provider store={store}> 
     <Router history={browserHistory} routes={routeConfig} /> 
    </Provider> 
    </div>, 
    document.getElementById('app') 
);

完美的作品（給予過渡小組的方法組件訪問），但有一個例外 - 子組件（即Home）不能是connect版到Redux的全局狀態。如果需要，該組件基本上可以是一個包裝，它可以呈現連接到Redux狀態的另一個組件，因此Home（例如）實際上就是在那裏處理動畫，其子組件負責處理所有數據-有關。

來源

2016-02-09 18:22:18 Sasha

讓ReactTransitionGroup和Redux-Simple-Router一起工作

回答

相關問題