React Native組件不能使用超級

Question

我已經創建了一個組件，其中包含一些我想在多個組件中使用的React組件的功能。

我已經嘗試實現它，但是每當我嘗試調用super.updateHeader ，它就會因錯誤而崩潰

ExceptionsManager.js:84 Unhandled JS Exception: TypeError: TypeError:  
Cannot read property 'call' of undefined

在構造函數中使用super可以正常工作。 嘗試使用this.updateHeader達到功能this.updateHeader導致

Unhandled JS Exception: TypeError: TypeError: this.updateHeader is not a function

updateHeader或我從中調用的函數都不是箭頭函數。

我該如何解決？ （它們是基於實例的，因此我想避免為此創建某種庫）

SuperComponent：

class CustomRouteViewComponent extends Component {
    updateHeader(props) {
        const {settings, navigation} = props;

        props.navigation.setParams({
            headerTintColor: settings.theme === 'dark' ? commonColorDark.textColor : commonColor.textColor,
            backgroundColor: settings.theme === 'dark' ? commonColorDark.headerStyle : commonColor.headerStyle,
        });
    };
}
const mapStateToProps = state => ({settings: state.settings});

export default connect(mapStateToProps)(CustomRouteViewComponent);

主屏幕

class Home extends CustomRouteViewComponent {
    componentWillMount() {
        this.updateHeader(this.props);
    }
    render() {
        return (
            <View><Text>Hello!</Text></View>
        )
    }
}
const mapStateToProps = state => ({});

export default connect(mapStateToProps)(Home);

Answer 1

問題是OOP繼承與功能方法（Redux connect ）混合在一起。 Home模塊中的CustomRouteViewComponent是連接的功能組件，而不是原始的類組件。

可以出於繼承目的導出CustomRouteViewComponent類，或者可以在連接的組件上通過以下方式訪問原始類：

class Home extends CustomRouteViewComponent.WrappedComponent {...}

這將導致問題，因為CustomRouteViewComponent已經依賴於連接的道具，但是不會考慮其自身的mapStateToProps ，即Home中將沒有props.settings 。

在這種情況下，正確的解決方案是不要將OOP與功能編程結合使用。 CustomRouteViewComponent的行為可以通過HOC或mapStateToProps函數的組合來實現。