新建的redux工程在自定义组件内部@connect 之后 this.props 为空

[yigga]

在引用自定义组件的页面正常

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>

pdeva created this issue in DefinitelyTyped/DefinitelyTyped

open react-redux types give errors when used as decorators #20796