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的数组，最好在用将数组复制，然后使用复制体。不然可能会不更新。