taro组件笔记
作者:互联网
创建子组件
import Taro, { Component, Config } from '@tarojs/taro':引入Component
ShopList :子组件名称
export default ShopList:导出ShopList组件
ShopList.defaultProps:默认值集合
render :必须实现的方法(需要return 组件的html)
import Taro, { Component, Config } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' class ShopList extends Component{ render () {} } ShopList.defaultProps={} export default ShopList
子组件
{this.props.name}:获取父组件传过来的name值
onClick={this.clickBtn} :绑定方法clickBtn
this.props.onChaneg('A2') :调用父组件传过来的方法 给父组件传值A2
import Taro, { Component, Config } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' class ShopList extends Component{ clickBtn () { this.props.onChaneg('A2') } render () { return (<Vive> <Button onClick={this.clickBtn}>调用父组件方法更改父组件值</Button> {this.props.name} </Vive>) } } ShopList.defaultProps={ name:'B', onChaneg:null } export default ShopList
父组件
import ShopList from './ShopList' : 引入子组件
<ShopList name='B1' /> :使用子组件并给子组件ShopList 传递name值张三1
change :传递给子组件用来 子组件向父组件传值
onChaneg:传递给子组件 值是 父组件的 change 方法 主要 值需要 bind(this)这里的this 是父组件
import Taro, { Component, Config } from '@tarojs/taro' import { View, Text, Button } from '@tarojs/components' import './index.scss' import ShopList from './ShopList' export default class Index extends Component { /** * 指定config的类型声明为: Taro.Config * * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型 * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型 */ config: Config = { navigationBarTitleText: '首页' } componentWillMount () { } componentDidMount () { this.setState({name:'A'}) } componentWillUnmount () { } componentDidShow () { } componentDidHide () { } click () { this.setState({name:'A1'}, ()=>{ console.log(this.state.name) }) console.log(this.state.name) } change (e) { this.setState({name:e}, ()=>{ console.log(this.state.name) }) } render () { return ( <View className='index'> <ShopList name='B1' onChaneg={this.change.bind(this)} /> <Button onClick={this.click}>更改</Button> <Text>{this.state.name}</Text> </View> ) } }
标签:ShopList,name,tarojs,Component,笔记,import,组件,taro 来源: https://www.cnblogs.com/y734290209/p/11029122.html