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. based on Greenlets (via Eventlet and Gevent) fork 孙子worker 比较 gevent不是异步 协程原理 占位符 placeholder (Future, Promise, Deferred) 循环引擎 greenlet 没有显式调度的微线程,换言之 协程

    gevent GitHub - gevent/gevent: Coroutine-based concurrency library for Python https://github.com/gev ...

  2. Linux常用命令:文件操作命令

    Linux系统命令主要包括文件操作.网络命令和性能命令,本文介绍常用文件操作命令. 修改文件属性 文件类型: 普通文件:- 目录文件:d 块设备文件:b,硬盘 字符设备: c,串行端口的接口设备,例如 ...

  3. SpringMVC听课笔记(九:数据转换 & 数据格式化 & 数据校验)

    1.数据绑定流程 --1). Spring MVC主框架将ServletRequest对象及目标方法入参实例传递给WebDataBinderFactory实例,以创建DataBinder实例对象. - ...

  4. Spark获取DataFrame中列的方式--col,$,column,apply

    Spark获取DataFrame中列的方式--col,$,column,apply 1.官方说明 2.使用时涉及到的的包 3.Demo 原文作者:大葱拌豆腐 原文地址:Spark获取DataFrame ...

  5. 你必须知道的关于操作系统的N个概念!

    本文全部概念都是基于<计算机操作系统教程(第四版)>中的表述归纳而成. 操作系统的任务和功能 操作系统的职能是管理和控制计算机系统中的所有硬件和软件资源,合理地组织计算机流程,并为用户提供 ...

  6. ThreadLocal全面解析,一篇带你入门

    ===================== 大厂面试题: 1.Java中的引用类型有哪几种? 2.每种引用类型的特点是什么? 3.每种引用类型的应用场景是什么? 4.ThreadLocal你了解吗 5 ...

  7. 使用VisualStudio直接运行简单的C#语句

    场景 经常有这样的需求, 想要测试一些简单的C#语法, 或者测试一下 文件 目录 操作相关的Api, 通常的做法是建立一个C#控制台项目, 然后写代码测试, 但是这样的做法对测试简单的语法和Api来说 ...

  8. CF-125E MST Company (单度限制最小生成树)

    参考红宝书 题目链接 对除 1 号点顶点外的点集,求一次最小生成森林,对于最小生成森林的联通分量,选择最短的一条边与 1 号点相连.设此时 1 号点的度为 \(k_0\),如果 \(k_0\lt L\ ...

  9. C++ Socket 入门

    Socket 入门 前置知识 :计算机网络基础(TCP/IP四层模型) Socket 原意是"插座",在计算机通信领域被翻译为"套接字",以\(\{IP:Por ...

  10. 最小生成树(MST)Prim算法和Kruskal算法

    刚学完最小生成树,赶紧写写学习的心得(其实是怕我自己忘了) 最小生成树概念:一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边. 就是说 ...