Taro - 组件通信

*在开发前最好把官方文档过一遍,在开发时有个印象.

在实际开发中,经常会遇到组件复用的情况.很多人都会选择来封装组件来减少重复开发用的时间,接下来就目前遇到的情况做一个总结.

就目前业务要求下,要开发一个业务列表,在父组件中获取数据源传入子组件,这个情景很多人都不陌生,接下来就是实现的流程:

1.请求数据,运用taro自带的Taro.request,

Taro.request({
       method: 'POST',
       url: 'xxx',
       data: {}
 })
  .then(res => {
       this.setState({
           info
       })
  })

这边请注意,如果用异步的话,初次请求,将会出现传输到子组件的info出现[]的情况.可以使用

Taro.request({
      method: 'POST',
      url: 'xxx',
      data: {},
      success:(res)=>{
        this.setState({
           info
      })
  }
}) 

来解决传到子组件出现空数组的情况.

2.父组件<CruitList info={this.state.xxx} />,传入.

3.子组件中,this.props.info进行接收.

4.子传父:

子组件:<View onClick={this.submit} className='main'>{listItems}</View>

同时定义:

submit=()=>{
    this.props.callback('test');
}

父组件:<CruitList callback={this.callback} info={this.state.xxx} />

同时定义:

callback = (e: any) => {
    console.log(e)

  Taro.showToast({
    title: 'status',
    icon: 'none'
  })
}

以上就是基本的组件传值.

1).遍历渲染:this.props.info取到数据后直接map((info: any, index: any) =>{};

2).条件渲染:<View style={(info.method == '1') ? 'display:block' : 'display:none'}>show</View>