redux connect（）によって受信された反応コンポーネントを延長する

Question

Redux connect()によって接続されているコンポーネントを何らかの形で拡張することはできますか？

FormContainer.componentDidMount =() => ... 

やカスタム機能を追加します。私はform-container.jsの内側と私は

const FormContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Form) 

を使用している場合たとえば、このようないくつかのメソッドをオーバーライドする方法はありますか？

Answer 1

これには高次コンポーネントを使用できます。

import HigherOrderComponent from './HigherOrderComponent' 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    componentDidMount() { 
    this.props.customMethod() 
    } 
    render() { 
     ... 
    } 
} 
const MutatedComponent = HigherOrderComponent(MyComponent) 
const ConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(MutatedComponent) 

は、私の知る限りでは、あなたが反応コンポーネントのライフサイクルメソッドをオーバーライドすることはできません：私はこのカスタムメソッドを使用する方法 this article

function HigherOrderComponent(WrappedComponent) { 
    return class NewComponent extends React.Component { 
    constructor() { 
     super(props) 
     this.customMethod = this.customMethod.bind(this) 
    } 
    customMethod() { 
     console.log('You called an injected method'); 
    } 
    render() { 
     return <WrappedComponent {...this.props} customMethod={this.customMethod} /> 
    } 
    } 
} 

からこの例を借りています。しかし、あなたはHoCを使ってメソッドを注入することができます。