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 ...
随机推荐
- (转载)微软数据挖掘算法:Microsoft 时序算法之结果预测及其彩票预测(6)
前言 本篇我们将总结的算法为Microsoft时序算法的结果预测值,是上一篇文章微软数据挖掘算法:Microsoft 时序算法(5)的一个总结,上一篇我们已经基于微软案例数据库的销售历史信息表,利用M ...
- JVM调优 jdk版本 机器配置 建议jvm参数 备注
https://juejin.im/post/5b091ee35188253892389683 大型跨境电商JVM调优经历 前提:某大型跨境电商业务发展非常快,线上机器扩容也很频繁,但是对于线上机器的 ...
- 透明小电视上线——GitHub 热点速览 v.21.05
作者:HelloGitHub-小鱼干 这周的 GitHub Trending 真是棒极了.小鱼干喜欢的科技博主又开源了他的硬件玩具,一个透明的小电视机,HG 的小伙伴看完项目,再买个电路板和分光棱镜, ...
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
- Java8中流的性能
流(Stream)是Java8为了实现最佳性能而引入的一个全新的概念.在过去的几年中,随着硬件的持续发展,编程方式已经发生了巨大的改变,程序的性能也随着并行处理.实时.云和其他一些编程方法的出现而得到 ...
- docker(4)解决pull镜像速度缓慢
前言 上一篇讲到pull 镜像,但是pull镜像的时候下拉的速度实在感人,有什么解决办法吗?我们只需将docker镜像源修改为国内的 将docker镜像源修改为国内的: 在 /etc/docker/d ...
- AtCoder Beginner Contest 173
比赛链接:https://atcoder.jp/contests/abc173/tasks A - Payment 题意 计算只用 $1000$ 元支付某个价格 $n$ 的找零是多少. 代码 #inc ...
- P3376 [模板] 网络最大流
https://www.luogu.org/blog/ONE-PIECE/wang-lao-liu-jiang-xie-zhi-dinic EK 292ms #include <bits/std ...
- 由CloudStack项目引起的ESXI嵌套虚拟化引起的二级虚拟机无法被访问
关于这个问题,主要以文字描述为主,最终解决方法其实就一个步骤. 问题描述: 某客户需要部署某企业的云平台,但是由于年前没有足够的物理机资源,所以提供的资源均为虚拟机,现在让我们做技术评估. 其实观察整 ...
- 计算机网络 part2
一.UDP协议 1.概述 UDP提供不可靠的服务,无连接(不存在建立连接的时延),首部开销相对TCP小,没有拥塞控制,提供最大努力交付,面向报文(无论多长的报文UDP也只加一个头部就往下发:TCP面向 ...