fix(taro-components): eslint 配置 & tabbar 类型推导

packages/taro-components/.eslintrc.js

@@ -5,7 +5,9 @@ module.exports = {
   rules: {
     ...config.rules,
     'no-console': 0,
-    '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': 'h' }]
+    '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': 'h' }],
+    'react/no-unknown-property': [2, { ignore: ['class'] }],
+    'react/jsx-key': 1
   },
   settings: {
     react: {

packages/taro-components/src/components/tabbar/tabbar-item.tsx

@@ -1,16 +1,27 @@
 import classNames from 'classnames'
-import { h } from '@stencil/core'
+import { FunctionalComponent, h } from '@stencil/core'
 
-export const TabbarItem = (props) => {
-  const {
-    index = null,
-    isSelected = false,
-    textColor = {},
-    iconPath = '',
-    badgeText = null,
-    showRedDot = false,
-    text
-  } = props
+type TabbarItemProps = {
+  index: number
+  isSelected?: boolean
+  textColor?: string
+  badgeText?: string
+  iconPath: string
+  showRedDot?: boolean
+  text?: string
+  onSelect: (index: number) => void
+}
+
+export const TabbarItem: FunctionalComponent<TabbarItemProps> = ({
+  index,
+  isSelected = false,
+  textColor,
+  iconPath,
+  badgeText,
+  showRedDot = false,
+  text,
+  onSelect
+}) => {
   const className = classNames('weui-tabbar__item', {
     'weui-bar__item_on': isSelected
   })
@@ -26,27 +37,30 @@ export const TabbarItem = (props) => {
   }
 
   function onClick () {
-    props.onSelect(props.index)
+    onSelect(index)
   }
 
-  return <a key={index} href='javascript:;' class={className} onClick={onClick}>
-    <span style={{ display: 'inline-block', position: 'relative' }}>
-      <img src={iconPath} alt='' class='weui-tabbar__icon' />
-      {badgeText &&
-      <span
-        class='weui-badge taro-tabbar-badge'
-        style={badgeStyle}>
-        {badgeText}
+  return (
+    <a key={index} href='javascript:;' class={className} onClick={onClick}>
+      <span style={{ display: 'inline-block', position: 'relative' }}>
+        <img src={iconPath} alt='' class='weui-tabbar__icon' />
+        {!!badgeText && (
+          <span
+            class='weui-badge taro-tabbar-badge'
+            style={badgeStyle}>
+            {badgeText}
+          </span>
+        )}
+        {showRedDot && (
+          <span
+            class='weui-badge weui-badge_dot'
+            style={dotStyle}
+          />
+        )}
       </span>
-      }
-      {showRedDot &&
-      <span
-        class='weui-badge weui-badge_dot'
-        style={dotStyle}
-      />}
-    </span>
-    <p class='weui-tabbar__label' style={{ color: textColor }}>
-      {text}
-    </p>
-  </a>
+      <p class='weui-tabbar__label' style={{ color: textColor }}>
+        {text}
+      </p>
+    </a>
+  )
 }

packages/taro-components/src/components/tabbar/tabbar.tsx

@@ -3,6 +3,8 @@ import classNames from 'classnames'
 import resolvePathname from 'resolve-pathname'
 import { splitUrl } from '../../utils'
 import { TabbarItem } from './tabbar-item'
+
+// IGNORE: 由于 @tarojs/taro 与 @tarojs/components 中存在循环依赖，暂时使用 commonjs 引用
 const Taro = require('@tarojs/taro')
 
 // const removeLeadingSlash = str => str.replace(/^\.?\//, '')
@@ -276,8 +278,8 @@ export class Tabbar implements ComponentInterface {
     Taro.eventCenter.off('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler)
     Taro.eventCenter.off('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler)
     Taro.eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler)
-    Taro.eventCenter.off('__taroShowTabBarHandler', this.showTabBarHandler)
-    Taro.eventCenter.off('__taroHideTabBarHandler', this.hideTabBarHandler)
+    Taro.eventCenter.off('__taroShowTabBar', this.showTabBarHandler)
+    Taro.eventCenter.off('__taroHideTabBar', this.hideTabBarHandler)
   }
 
   componentDidLoad () {
@@ -333,7 +335,8 @@ export class Tabbar implements ComponentInterface {
                 iconPath={iconPath}
                 text={item.text}
                 badgeText={item.badgeText}
-                showRedDot={item.showRedDot} />
+                showRedDot={item.showRedDot}
+              />
             )
           })}
         </div>