taro defaultProps
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
- 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>
);
}
}
- 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的更多相关文章
- taro 最佳实践
对 JSX 支持程度补充说明: 不能在包含 JSX 元素的 map 循环中使用 if 表达式 不能使用 Array#map 之外的方法操作 JSX 数组 不能在 JSX 参数中使用匿名函数 暂不支持在 ...
- taro 填坑之路(一)taro 项目回顾
(1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...
- taro 自定义 轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
- 【Taro】363- 玩转 Taro 跨端之 flex 布局篇
Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...
- Taro自定义Modal对话框组件|taro仿微信、android弹窗
基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...
- Taro多端自定义导航栏Navbar+Tabbar实例
运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...
- Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。
import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@ta ...
- taro 滚动事件
taro 滚动事件 taro scroll bug ScrollView https://nervjs.github.io/taro/docs/components/viewContainer/scr ...
- taro scroll tabs 滚动标签 切换
taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...
随机推荐
- Linux下编译安装源码包软件 configure ,make, make install, make test/check, make clean 假目标
http://www.360doc7.net/wxarticlenew/541275971.html 一.程序的组成部分 Linux下程序大都是由以下几部分组成: 二进制文件:也就是可以运行的程序文件 ...
- Python学习【第8篇】:python中的函数
1.python中函数定义方法 def test(x): "This istest" y = x*2+1 return y vaule = test(2)print(vaule)运 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- P1663 山
写在前面 简单的二分答案,稍微加点数学计算,很有意思. 算法思路 二分答案可行的原因:答案具有单调性. 这道题目中证明一下:首先无限高显然是能看到任何一个点的,且山的每一条边都是对答案的一个限制,因此 ...
- SpringMVC听课笔记(三:使用@RequestMapping映射请求)
1. Spring MVC使用 @RequestMapping 注解为控制器指定可以处理哪些URL请求 2. 标注点: --类定义处:提供初步的请求映射信息.相对于WEB应用的根目录 --方法处:提供 ...
- .Net Core 3.1浏览器后端服务(一) Web API项目搭建
一.前言 基于CefSharp开发的浏览器项目已有一段时间,考虑到后期数据维护需要Server端来管理,故开启新篇章搭建浏览器后端服务.该项目前期以梳理服务端知识为主,后期将配合CefSharp浏览器 ...
- mysql:如何利用覆盖索引避免回表优化查询
说到覆盖索引之前,先要了解它的数据结构:B+树. 先建个表演示(为了简单,id按顺序建): id name 1 aa 3 kl 5 op 8 aa 10 kk 11 kl 14 jk 16 ml 17 ...
- Pytest(6)重复运行用例pytest-repeat
前言 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来. 自动化运行用例时候,也会出现偶然的bug,可以针对单个用例, ...
- 数据同步工具Sqoop和DataX
在日常大数据生产环境中,经常会有集群数据集和关系型数据库互相转换的需求,在需求选择的初期解决问题的方法----数据同步工具就应运而生了.此次我们选择两款生产环境常用的数据同步工具进行讨论 Sqoop ...
- Codeforces Round #345 (Div. 1) C. Table Compression (并查集)
Little Petya is now fond of data compression algorithms. He has already studied gz, bz, zip algorith ...