taro component notes

Create subassembly
import Taro, {Component, Config} from '@ tarojs / taro': introducing the Component
ShopList: Name subassembly
export default ShopList: Export ShopList assembly
ShopList.defaultProps: default value set
render: method must be implemented (return assembly requires the 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

　　

Subassembly

{this.props.name}: Get parent component name value pass over the
onClick = {this.clickBtn}: Binding Method clickBtn
this.props.onChaneg ( 'A2'): calling the parent component to pass over the parent component transfer method value 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>
        <The Button the onClick = { the this .clickBtn}> call the parent element method to change the value of parent element </ Button>
        {this.props.name}
        </Vive>)
    }
}

ShopList.defaultProps={
    name:'B',
    onChaneg:null
}
export default ShopList

 

Parent component

import ShopList from './ShopList': introducing subassembly
<ShopList name = 'B1' / >: to use the sub-assembly and delivery sub-assembly ShopList value name Joe Smith. 1
Change: transmitting to the sub-assembly is used to transfer parent component subassembly value
onChaneg: subassembly value is passed to the method of the parent change value requires primary assembly bind (this) this parent component here is

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 {

  /**
   * Specify the type of config declared: Taro.Config
   *
   * Since the typescript for object type inference can only be launched basic types of Key
   * For Like navigationBarTextStyle: 'black' this type is deduced string
   * Tips and statements navigationBarTextStyle: 'black' | 'white' type of conflict, we need to display the type of declaration
   */
  config: Config = {
    navigationBarTitleText: 'Home'
  }

  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>
    )
  }
}