React-Router HOC/withRouter是否有ES6語法？

有沒有辦法將ES6 extend功能與React-Router「withRouter」組件結合使用？React-Router HOC/withRouter是否有ES6語法？

事情是這樣的：

import { withRouter } from 'react-router'; 

export default class extends withRouter { 
    ... 
    //Use react router history prop to navigate back a page. 
    handleSomeEvent() { 
    this.props.router.goBack(); 
    } 
    ... 
}

還是我堅持使用舊的構圖模式？

var MyComponent = React.createClass({ 
    ... 
}); 
export default withRouter(MyComponent);

來源

2016-08-01 Noah Solomon

是的，這很容易，看到波紋管（不是說元件的安裝後，你應該重定向2S ...只是一個例子）。

BTW我的反應路由器的版本是2.6（2.4 +需要withRouter）

import React, { Component } from 'react'; 
import { withRouter } from 'react-router'; 

class MyComponent extends Component { 
    componentDidMount() { 
     setTimeout(() => { 
      this.props.router.push('my-url') 
     }, 2000); 
    } 

    render() { 
     return (
      <div>My Component</div> 
     ); 
    } 
} 

export default withRouter(MyComponent);

來源

2016-08-15 10:08:37

我想這是迄今爲止最接近。我沒有考慮將這個作品與一個命名的類一起使用。我希望'類MyComponent與路由器一起擴展'，但我認爲現在可以做到。 –

它可能看起來很瘋狂，但它工作正常。我甚至使用它與REDX和我的「權限控制器」高階組件 '出口默認連接（mapStateToProps，{fetchCampaigns}）（AuthorizedComponent（Campaigns））;' –

@MarekJalovec在您的示例在註釋中你會用路由器嗎？它會是：'導出默認連接（mapStateToProps，{fetchCampaigns}）（AuthorizedComponent（withRouter（Campaigns）））;' –

您可以像這樣使用它。

@withRouter 
export default class extends withRouter { 
    ... 
    //Use react router history prop to navigate back a page. 
    handleSomeEvent() { 
    this.props.router.goBack(); 
    } 
    ... 
}

但是，你必須包括babel-plugin-transform-decorators-legacy

來源

2016-08-04 06:24:58 Deadfish

React-Router HOC/withRouter是否有ES6語法？

回答

相關問題