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



  • bc256242-d7f1-44a2-b16e-d8227ccbbdda-image.png

    在引用自定义组件的页面正常
    a46f2979-686a-446f-ade7-95fe4cd6db91-image.png

    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>
    
    

登录后回复