ReactNative多继承方法

今天告诉你们ReactNative 多继承的实现。

  用检验是否存在网络为例子如下：

1.这个NetInfoDecorators类就是父类，专门检测是否存在网络。

   

/**
 * Created by chenjialin on 2017/3/27.
 */
import React, {Component} from 'react'
import {NetInfo} from 'react-native'

const NetInfoDecorators = WrappedComponent => class extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isConnected: true,
        }
    }

    componentDidMount() {
        NetInfo.isConnected.addEventListener('change', this._handleNetworkConnectivityChange);
    }

    _handleNetworkConnectivityChange = isConnected => this.setState({isConnected})

    render() {
        return <WrappedComponent {...this.props} {...this.state}/>
    }
}

export default NetInfoDecorators

2.Feed类实现这个父类NetInfoDecorators的。

import NetInfoDecorators from './utils/NetInfoDecorators'

@NetInfoDecorators
@observer
export default class Feed extends PureComponent {

    @observable foodCategoryList = [];

    componentWillReceiveProps(nextProps) {
        const {isConnected} = nextProps;

        console.log(isConnected);

    }