taro的坑:子组件的默许属性和父组件中修正子组件款式题目以及运用庞杂数据

坑一:子组件的默许属性

假如如许猎取可选属性的默许值:

    const { startScore = 0, currentScore = 0, endScore = 0, showStartAndEnd = true } = this.props;

而又没有现实传入属性的话页面中就会显现null。我们须要在子组件内如许定义默许属性:

  static defaultProps = {
    currentScore: 0,
    startScore: 0,
    showStartAndEnd: true,
    endScore: 0,
  };

坑二:父组件中修正子组件款式

假如子组件在多个处所用,那末就须要在差别处所展现差别的子组件款式,所以就须要在父组件中修正款式。而taro不能像react那样直接修正,而是须要如许贫苦的步骤:

先在子组件中定义有哪些拓展的class:

  static externalClasses = ['my-class', 'radio-class', 'img-class', 'info-class', 'add-class', 'count-class', 'delete-class'];

再将拓展的class运用到子组件款式可变的处所:

      <View className="Goods-radio radio-class" onClick={this.onSelectGoods}>
        <PRadio value={selected}/>
      </View>

如图中的radio-class

以后在父组件中运用对应的将对应的class作为属性传输:

      <Goods
        stock={item.goods.stock}
        goodsId={item.goods.id}
        key={index}
        my-class={'shopping-good'}
        radio-class={'Goods-radio'}
        count-class={'Goods-count'}
        delete-class={'Goods-remove'}
        img-class={'Goods-img'}
        info-class={'Goods-info'}
      >

如图中的radio-class。如今我们终究能够在父组件用Goods-radio作为className来修正子组件的款式了。

坑三

假如你想在JSX中运用庞杂的数据结构,如mobx的数组,最好在用将数组复制,然后运用复制体。不然可能会不更新。

    原文作者:ppsspp
    原文地址: https://segmentfault.com/a/1190000019269746
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞