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的數組，最好在用將數組複製，而後使用複製體。否則可能會不更新。