新建的redux工程在自定义组件内部@connect 之后 this.props 为空
-
在引用自定义组件的页面正常
index.tsx
render() { console.log('index',this) return ( <View className='index'> <SearchBar /> <TabBar/> <View className="videos"></View> <NavigateBar /> </View> ) }
自定义组件.tsx
import { ComponentClass } from 'react' import Taro, { Component, Config } from '@tarojs/taro' import { View, Text, ScrollView } from '@tarojs/components' import { connect } from '@tarojs/redux' import { getCate } from '../../actions/category' import { add, minus, asyncAdd } from '../../actions/counter' import './tabBar.less' // #region 书写注意 // // 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性 // 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props // 这样才能完成类型检查和 IDE 的自动提示 // 使用函数模式则无此限制 // ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796 // // #endregion type PageStateProps = { counter: { num: number }, category: { id: number, title: string } } type PageDispatchProps = { getCate: () => void add: () => void dec: () => void asyncAdd: () => any } type PageOwnProps = {} type PageState = {} type IProps = PageStateProps & PageDispatchProps & PageOwnProps interface Tabbar { props: IProps; state: { deviceWidth: number, prevScroll: number, currentScroll: number, currentTab: number, tabList: Array<{ id: number, title: string }> } } @connect(({ counter, category }) => ({ counter, category, }), (dispatch) => ({ add() { dispatch(add()) }, dec() { dispatch(minus()) }, asyncAdd() { dispatch(asyncAdd()) } })) class Tabbar extends Component { constructor() { super() this.state = { deviceWidth: 0, prevScroll: 0, currentScroll: 0, tabList: [], currentTab: 0 } } /** * 指定config的类型声明为: Taro.Config * * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型 * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型 */ config: Config = { navigationBarTitleText: '首页' } componentWillReceiveProps(nextProps) { console.log(this.props, nextProps) } componentWillMount() { this.setState({ deviceWidth: Taro.getSystemInfoSync().windowWidth, }) } componentDidMount() { } componentWillUnmount() { } componentDidShow() { } componentDidHide() { } switchTab(index) { const query = Taro.createSelectorQuery().in(this.$scope) query.select(`#tab${index}`).boundingClientRect(rect => { const elHalfWideth = rect.width / 2 const elLeft = rect.left const deviceWdthHalf = this.state.deviceWidth / 2 const needScroll = elLeft - deviceWdthHalf + elHalfWideth this.setState({ currentScroll: this.state.prevScroll + needScroll }) }).exec() this.setState({ currentTab: index }) } onScroll(e) { let distance = e.detail.scrollLeft; this.setState({ prevScroll: distance }) } render() { console.log('cate', this) const { currentScroll } = this.state return ( <ScrollView onScroll={this.onScroll.bind(this)} scrollWithAnimation scrollX scrollLeft={currentScroll} className='tabBar'> {/* { this.props.category.map(tab => { return ( <View key={tab.id} onClick={this.switchTab.bind(this, 0)} className={"tab"} id='tab0'> <Text>{tab.title}</Text> </View> ) }) } */} </ScrollView> ) } } // #region 导出注意 // // 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性 // 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误 // // #endregion export default Tabbar as ComponentClass<PageOwnProps, PageState>