taro的坑：子组件的默认属性和父组件中修改子组件样式问题以及应用复杂数据

Cristalven 发布于2019-08-26 13:54 / 1526人阅读

摘要：我们需要在子组件内这样定义默认属性坑二父组件中修改子组件样式如果子组件在多个地方用，那么就需要在不同地方展示不同的子组件样式，所以就需要在父组件中修改样式。现在我们终于可以在父组件用作为来修改子组件的样式了。

坑一：子组件的默认属性

如果这样获取可选属性的默认值：

    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应用到子组件样式可变的地方：

如图中的radio-class

之后在父组件中应用对应的将对应的class作为属性传输：

如图中的radio-class。现在我们终于可以在父组件用Goods-radio作为className来修改子组件的样式了。

坑三

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

GPU云服务器云服务器子组件组件样式 asp上传组件应用服务器端应用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109776.html

Taro 简介

摘要：让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来，就伴随着赞誉与争议不断。同时于开发者来说，小程序的生态不断在完善，许多的坑已被踩平，虽然还是存在一些令人诟病的问题，但已经足见微信的诚意了。 Taro 介绍在互联网不断发展的今天，前端程序员们也不断面临着新的挑战，在这个变化多端、不断革新自己的领域，每一年都有新的美好事物在发生。从去年微信小程序的诞生，到今年的逐渐火热，以及...

sixgo 2019-08-23 16:18 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

Travis 2019-08-30 11:19 评论0 收藏0