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 ...
随机推荐
- 腾讯libco协程原理
https://blog.csdn.net/GreyBtfly/article/details/83688420 堆栈 https://blog.csdn.net/lqt641/article/det ...
- 大白话入门 Spring Cloud
首先我给大家看一张图,如果大家对这张图有些地方不太理解的话,我希望你们看完我这篇文章会恍然大悟. 什么是Spring cloud 构建分布式系统不需要复杂和容易出错.Spring Cloud 为最常见 ...
- CF733F
扯在前面 人生第一道黑(>▽< ). 那天听了老师讲图论讲了这道题,发现这道黑题并不是很黑于是就做了做,在同机房dalao的帮助下三个小时做完(太菜了),于是来发篇题解. 正文 题意 给出 ...
- 非关系型数据库(NOSQL)和关系型数据库(SQL)区别详解
前言: 在我们的日常开发中,关系型数据库和非关系型数据库的使用已经是一个成熟的软件产品开发过程中必不可却的存储数据的工具了.那么用了这么久的关系数据库和非关系型数据库你们都知道他们之间的区别了吗?下面 ...
- SSM框架搭建详细解析
总结了一下搭建SSM框架流程,在以后用到的时候方便回头使用. 使用工具:MyEclipse 2015:Tomcat 8版本:jdk1.8版本. 首先: 1:创建一个WebProject项目,jdk1. ...
- RedisUtil,Redis工具类
RedisUtil,Redis工具类 1.配置maven,增加依赖 2.配置工具类 1.配置maven,增加依赖 <dependency> <groupId>redis.cli ...
- GeoMesa,整体架构,创建Schema并导入数据
GeoMesa,整体架构,创建Schema并导入数据 一.GeoMesa-整体架构 二.GeoMesa-创建Schema并导入数据 2.1 GeoTools Data 模块 2.2 索引管理 2.3 ...
- (12)Linux文件系统层次结构
在 Linux 操作系统中,所有的文件和目录都被组织成以一个根节点"/"开始的倒置的树状结构 文件系统的最顶层是由根目录开始的,系统使用"/"来表示根目录,在根 ...
- 设计模式(二)——Java简单工厂模式
简单工厂模式 案例: 披萨的项目(要便于披萨种类的扩展,要便于维护) 1)披萨的种类很多(比如 GreekPizz.CheesePizz 等) 2)披萨的制作有 prepare,bake, cut, ...
- 2019 Multi-University Training Contest 2 Harmonious Army(最小割)
题意:给你n个点 每个点都有两种选择 成为战士或者法师 现在给你m个关系 对应这两个人的对应关系的权值A,B,C 思路:按照下面的思路建图跑最小割(要注意权值要乘2 可能存在不整除的情况) #incl ...