共计 965 个字符,预计需要花费 3 分钟才能阅读完成。
坑一:子组件的默认属性
如果这样获取可选属性的默认值:
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 的数组,最好在用将数组复制,然后使用复制体。不然可能会不更新。
正文完
发表至: javascript
2019-05-23