taro defaultProps

https://nervjs.github.io/taro/docs/best-practice.html#给组件设置-defaultprops


import Taro, { Component, Config } from '@tarojs/taro'
import {
View,
Text,
Image,
Icon,
Button,
Swiper,
SwiperItem,
} from '@tarojs/components' import './index.scss' const log = console.log; export default class EventPopper extends Component {
// config = {
// navigationBarTitleText: ''
// }
// constructor (props) {
// super(props)
// this.state = {
// name: null,
// // name: '',
// // name: 'Hello world!',
// }
// }
constructor () {
super(...arguments)
this.state = {
// name: null,
// name: '',
name: 'Hello world!',
}
this.preventPop = this.preventPop.bind(this);
}
static defaultProps = {
title: 'default prop title 1',
} // 你可以通过 bind 传入多个参数
preventPop (name, test, e) {
//事件对象 e 要放在最后
e.stopPropagation();
log(`name =\n`, name)
log(`test =\n`, test)
log(`e =\n`, e)
} render () {
return(
<Button onClick={(e) => this.preventPop(this.state.name, 'test name', e)}>
事件 button {this.props.title}
</Button>
)
// return(
// <Button onClick={this.preventPop.bind(this, this.state.name, 'test name')}>
// 事件 button {this.props.title}
// </Button>
// )
}
} EventPopper.defaultProps = {
title: 'default prop title 2',
};

OK

bug

state !== props

https://github.com/NervJS/taro/issues/71#issuecomment-604846671

defaultProps

  1. static

class Greeting extends Taro.Component {
constructor (props) {
super(props)
this.state = {
name: ``,
}
}
static defaultProps = {
name: 'Stranger'
};
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
  1. Props

class Greeting extends Taro.Component {
constructor (props) {
super(props)
this.state = {
name: ``,
}
}
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} Greeting.defaultProps = {
name: 'Stranger'
};

全局变量

https://nervjs.github.io/taro/docs/best-practice.html#全局变量


taro defaultProps的更多相关文章

  1. taro 最佳实践

    对 JSX 支持程度补充说明: 不能在包含 JSX 元素的 map 循环中使用 if 表达式 不能使用 Array#map 之外的方法操作 JSX 数组 不能在 JSX 参数中使用匿名函数 暂不支持在 ...

  2. taro 填坑之路(一)taro 项目回顾

    (1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...

  3. taro 自定义 轮播图组件

    1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...

  4. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

  5. Taro自定义Modal对话框组件|taro仿微信、android弹窗

    基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...

  6. Taro多端自定义导航栏Navbar+Tabbar实例

    运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...

  7. Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。

    import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@ta ...

  8. taro 滚动事件

    taro 滚动事件 taro scroll bug ScrollView https://nervjs.github.io/taro/docs/components/viewContainer/scr ...

  9. taro scroll tabs 滚动标签 切换

    taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...

随机推荐

  1. 分布式跟踪的一个流行标准是OpenTracing API,该标准的一个流行实现是Jaeger项目。

    https://github.com/jaegertracing/jaeger https://mp.weixin.qq.com/s/-Tn2AgyHoq8pwMun8JHcGQ Jaeger的深入分 ...

  2. ECMAScript6常用新特性总结

    一.let声明变量 1.基本用法: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 如下代码: { let a = 10; var ...

  3. 「笔记」数位DP

    目录 写在前面 引入 求解 特判优化 代码 例题 「ZJOI2010」数字计数 「AHOI2009」同类分布 套路题们 「SDOI2014」数数 写在最后 写在前面 19 年前听 zlq 讲课的时候学 ...

  4. Microsoft Exchange远程代码执行漏洞(CVE-2020-16875)

    Microsoft Exchange远程代码执行漏洞(CVE-2020-16875) 漏洞信息: 由于对cmdlet参数的验证不正确,Microsoft Exchange服务器中存在一个远程执行代码漏 ...

  5. ssh登陆时,参数直接加入密码

    参考:  [随笔]ssh登录时如何直接在参数中加入登录密码   安装 sshpass  

  6. 基于Servlet体系的HTTP请求代理转发Spring Boot组件

    背景概述 两个项目组原本都是各自负责两个产品线(产品A.产品B),由于公司业务的发展,目前需要将两个产品合并成一个大产品(功能整合,部分做取舍,最终产出产品C),前后端代码必然也需要整合,包括两个产品 ...

  7. 2021 年写 JavaScript 代码的 17 个优化技巧

    我们经常会写一些 JavaScript 代码,但是如何写出干净又易维护的代码呢?本文将讲解 17 个 JavaScript 代码的技术帮助你提高编程水平,此外,本文可以帮助您为 2021 年的 Jav ...

  8. js实现购物车左滑删除

    使用 js 和jquery动画实现购物车左滑,请引入jquery库,不然会报错哦! 首页编写页面,注意布局,滑动分成两部分,商品图片和信息放在一个布局,删除和移入收藏放在一起. 其中js用到了 tou ...

  9. zjnu1725 COCI (类似二维树状数组模拟)

    Description The 3rd round of COCI is already here! In order to bet on predict the scores, we have as ...

  10. Codeforces Round #645 (Div. 2) C. Celex Update

    题目链接:C.Celex Update 题意: 给你如图所示的图形,问从(x1,y1)−>(x2,y2)路径上的不同的元素和的数量是多少. 题解: 从(1,1)到(3,3) 元素和的1−2−4− ...