React Native Component не может использовать супер - PullRequest
Новая
       23

React Native Component не может использовать супер

0 голосов
/ 07 января 2019

Я создал компонент с несколькими функциями для компонентов React, которые я хотел бы использовать в нескольких компонентах.

Я пытался реализовать его, но всякий раз, когда я пытаюсь вызвать super.updateHeader, он вылетает с ошибкой 

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

Использование super в конструкторе работает без проблем. Попытка достичь функции с this.updateHeader приводит к 

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

Ни updateHeader, ни функция, из которой я ее вызываю, не являются функциями стрелок.

Как мне решить это? (Они основаны на экземплярах, поэтому я бы хотел не создавать для этого какую-то библиотеку)

суперкомпонент: 

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);

HomeScreen 

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

export default connect(mapStateToProps)(Home);

1 Ответ

0 голосов
/ 07 января 2019

Проблема в том, что наследование ООП смешано с функциональным подходом (Redux connect). CustomRouteViewComponent в Home модуль подключен функциональный компонент, а не оригинальный компонент класса.

CustomRouteViewComponent класс может быть экспортирован для целей наследования, или исходный класс может быть достигнут на подключенном компоненте как: 

class Home extends CustomRouteViewComponent.WrappedComponent {...}

Это приведет к проблемам, поскольку CustomRouteViewComponent уже полагается на подключенные реквизиты, но его собственный mapStateToProps не будет учитываться, т. Е. В Home.

не будет props.settings.

В этом случае правильное решение - не смешивать ООП с функциональным программированием. Поведение от CustomRouteViewComponent может быть достигнуто с помощью HOC или композиции mapStateToProps функций.

...