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