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，這個元件和父元件有互動，我們從父元件接受到了兩個資料和兩個函數

資料就不說了，我們是怎麼使用接受到的函數呢？比如說我們從父元件接收到了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>
        )
    }
}
           

在父元件中接受子元件傳過來的值

文章有些亂，主要是開發的時候寫到了，記錄一下，說的不對請指正，謝謝