*在开发前最好把官方文档过一遍,在开发时有个印象.
在实际开发中,经常会遇到组件复用的情况.很多人都会选择来封装组件来减少重复开发用的时间,接下来就目前遇到的情况做一个总结.
就目前业务要求下,要开发一个业务列表,在父组件中获取数据源传入子组件,这个情景很多人都不陌生,接下来就是实现的流程:
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>
