爲React組件創建一個HOC

我正在嘗試爲演示組件創建一個HOC組件，並且在語法上有點麻煩。爲React組件創建一個HOC

比方說，我的演示組件被稱爲BlogViewerBase，我們稱之爲HOC組件BlogViewerHoc。我想以下幾點：

我想在我的特別組成部分，一些處理函數
我想HOC組件連接到我的終極版店，得到國家和它傳遞給基礎元件

此代碼是否正確？

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

// Actions 
import * as myActions from '../actions/myActions'; 

// Base component 
import BlowViewerBase from '../components/blogViewerBase'; 

function hocBlogViewer(BlogViewerBase) { 

    return class BlogViewerHoc extends React.Component { 

     handlerFunction1() { 

      // Some logic here 
     } 

     handlerFunction2() { 

      // Some logic here 
     } 

     render() { 

      return <BlogViewerBase {...this.props} /> 
     } 
    } 
} 

function mapStateToProps(state) { 

    return { 

     var1: state.module.variable1, 
     var2: state.module.variable2 
    }; 
} 

function mapDispatchToProps(dispatch) { 

    return { 
     actions: bindActionCreators(myActions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(BlogViewerHoc(BlogViewerBase));

當我掙扎是HOC組件的例子我已經遇到看起來更像功能，我想我形成礦山更像是一個組件，因此不知道如果我連接到存儲正確的方法。不知道mapPropsToState,mapDispatchToState和處理函數是否在正確的位置。

來源

2017-08-21 Sam

您是否忘記將道具傳遞給包裝組件？'.I can not help you，因爲我對redux知之甚少。 –

是的，處理函數也會被傳遞。謝謝。 – Sam

定義您的HOC，然後將您的表示組件傳遞給它。此外，你可以綁定一個動作創建者到你的道具mapDispatchToProps。喜歡的東西：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { myActionCreator } from 'yourPathToYourActions'; 

// Actions 
import * as myActions from '../actions/myActions'; 

// Base component 
import BlowViewerBase from '../components/blogViewerBase'; 

function hocBlogViewer(WrappedComponent) { 

    return class extends React.Component { 

     handlerFunction1() { 

      // Some logic here 
     } 

     handlerFunction2() { 

      // Some logic here 
     } 

     componentDidMount() { 
     // I can dispatch this action now 
     this.props.myActionInProps(); 
     } 

     render() { 

      return <WrappedComponent {...this.props} /> 
     } 
    } 
} 

function mapStateToProps(state) { 

    return { 

     var1: state.module.variable1, 
     var2: state.module.variable2 
    }; 
} 

function mapDispatchToProps(dispatch) { 

    return { 
     myActionInProps: dispatch(myActionCreator()) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(hocBlogViewer(BlowViewerBase));

來源

2017-08-21 06:53:30

您的代碼似乎是確定我:)

也許對於閱讀簡單起見，我會做以下調整（不過這只是我的意見）：

const connector = connect(mapStateToProps, mapDispatchToProps) 

... 

export default function hocBlogViewer(BlogViewerBase) { 

    return connector(
    class BlogViewerHoc extends React.Component { 
...

來源

2017-08-21 06:54:35 GProst

爲React組件創建一個HOC

回答

相關問題