RN 高阶组件，有状态组件，无状态组件，以及组件之间的交互

高阶组件，有状态组件和无状态组件的定义我就不再多说了，我对个理解的也不是太深入，仅仅是能熟练使用的状态，今天刚好有时间，就记录一下

首先这个高阶组件是由多个组件组合起来的，List,List组件中又包含了Banner组件，Banner是一个无状态组件，最后是一个Popup组件

我就只把Banner和Popup贴出来了

这是一个无状态的Banner组件，仅仅作为数据的展示，没有生命周期，没有转态管理，从父组件中，我们可以看到，父组件给他传了5个数据，在子组件中用吧这些传过来的东西当参数来接受

我们还可以这么写    const {data ,isIndex , autoplayInterval, autoplay, infinite} = props

const Banner = (props) => {
    let isIndex = props.isIndex ? true : false //是否是首页使用
    let newHeight = props.height ? 300 : Dimensions.get('window').width*547/960
    const {data ,isIndex , autoplayInterval, autoplay} = props
    return (
        <Carousel
            style={styles.wrapper}
            autoplayInterval={props.autoplayInterval || 2000}
            autoplay={props.autoplay ? true : false}
            infinite={props.autoplay ? true : false}
        >
           {
             props.data.length?
             props.data.map((item,index) => {return itemRende(item, index, isIndex, newHeight)})
             :
             [false, false].map((item,index) => {return itemRende(item, index, isIndex, newHeight)})
           }
        </Carousel>
    )
}

接下来是一个有状态的Prupop，这个组件和父组件有交互，我们从父组件接受到了两个数据和两个函数

扫描二维码关注公众号，回复： 79407 查看本文章

数据就不说了，我们是怎么使用接受到的函数呢？比如说我们从父组件接收到了closePopup这个函数，我们直接在需要的时候执行这个函数, this.props.closePopup(),我们还可以把一些参数也附带传过去，父组件就能接受到这个参数了

export default class Popup extends Component{
    constructor(props) {
        super(props);
        this.state = {
            submitData:[],
            sumAmount:0,
            cartNumber:0
        }
    }

    // 确定提交
    _submit(closePopup){
        this.props.closePopup()
        if (this.state.sumAmount) {
            if (this.props.setCart) {
                this.props.setCart(this.state.cartNumber)
            }
            this.setState({sumAmount:0})
            this.props.dispatch({
    		    		type: 'cart/addProduct',
    		    		payload: this.state.submitData
    	    	})
            this.setState({submitData:[]})
        }
    }

    // 需要提交的数据
    _submitData(id, price, count) {
        let data = this.state.submitData;
        let result = false;
        let amount = 0;
        if (data.length > 0) {
            data.forEach((item, index)=>{
                if (item.skuId == id) {
                    item.count = count
                    amount = amount + price * count
                    result = true
                }else {
                    amount = amount +(item.price * item.count)
                }
            })
        }
        if (!result) {
            data.push({skuId:id, price:price, count:count})
            amount += price*count
        }
        this.setState({sumAmount: amount})
        this.setState({submitData: data})
        this.setState({cartNumber: data.length})
    }
    // 商品列表
    _itemRender(item, index){
        return(
            <View key={index} style={styles.itemview}>
                <View style={styles.leftView}>
                    <Text>{item.name}</Text>
                    <Text style={{color:fontColor.fontRed2}}>￥{toFixedNumber(item.salesPrice)}/{item.unit}</Text>
                </View>
                <Stepper style={{width:80}} key={index}  min={0} defaultValue={0} onChange={this._submitData.bind(this, item.id, item.salesPrice)} />
            </View>
        )
    }
    // 关闭时清空总价
    closePopup(){
        this.props.closePopup()
        this.setState({sumAmount:0})
        this.setState({submitData:[]})
    }

    render() {
        return (
            <Modal
                style={styles.modal}
                popup={true}
                maskClosable={true}
                visible={this.props.visible}
                onClose={this.closePopup.bind(this)}
                animationType="slide-up"
            >
                <ScrollView showsVerticalScrollIndicator={false} style={styles.ScrollView}>
                    {this.props.data.map((item, index)=>{return this._itemRender(item, index)})}
                </ScrollView>
                <TouchableOpacity style={styles.btn} onPress={this._submit.bind(this)}>
                    <Text style={styles.btntext}>{this.state.sumAmount?'确认':'取消'} ￥({this.state.sumAmount?toFixedNumber(this.state.sumAmount):'0.00'})</Text>
                </TouchableOpacity>
            </Modal>
        )
    }
}

在父组件中接受子组件传过来的值

文章有些乱，主要是开发的时候写到了，记录一下，说的不对请指正，谢谢