刚才我也出现这个问题
我通过 npm update 和 npm install 之后解决了。
在引用自定义组件的页面正常
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>