fix(tabbaritem): 属性传递改为 context，精简 props 类型

src/packages/tabbar/context.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export interface TabbarContext {
+  selectIndex: number
+  inactiveColor: string
+  activeColor: string
+  handleClick: (value: number) => void
+}
+
+export default React.createContext<TabbarContext | null>(null)

src/packages/tabbar/index.taro.ts

@@ -1,4 +1,5 @@
 import { Tabbar } from './tabbar.taro'
 
+export type { TabbarContext } from './context'
 export type { TabbarProps } from './tabbar.taro'
 export default Tabbar

src/packages/tabbar/index.ts

@@ -1,4 +1,5 @@
 import { Tabbar } from './tabbar'
 
+export type { TabbarContext } from './context'
 export type { TabbarProps } from './tabbar'
 export default Tabbar

src/packages/tabbar/tabbar.taro.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import TabbarItem from '../tabbaritem/index.taro'
+import TabbarContext from './context'
 
 export interface TabbarProps extends BasicComponent {
   defaultValue: number
@@ -63,20 +64,19 @@ export const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
       style={style}
     >
       <div className={`${classPrefix}-wrap`}>
-        {React.Children.map(children, (child, idx) => {
-          if (!React.isValidElement(child)) {
-            return null
-          }
-          const childProps = {
-            ...child.props,
-            active: idx === selectIndex,
-            index: idx,
-            inactiveColor,
+        <TabbarContext.Provider
+          value={{
+            selectIndex,
             activeColor,
+            inactiveColor,
             handleClick: setSelectIndex,
-          }
-          return React.cloneElement(child, childProps)
-        })}
+          }}
+        >
+          {React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) return null
+            return React.cloneElement(child, { ...child.props, index })
+          })}
+        </TabbarContext.Provider>
       </div>
       {(fixed || safeArea) && <div className={`${classPrefix}-safe-area`} />}
     </div>

src/packages/tabbar/tabbar.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/utils/use-props-value'
 import TabbarItem from '../tabbaritem'
+import TabbarContext from './context'
 
 export interface TabbarProps extends BasicComponent {
   defaultValue: number
@@ -63,20 +64,19 @@ export const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
       style={style}
     >
       <div className={`${classPrefix}-wrap`}>
-        {React.Children.map(children, (child, idx) => {
-          if (!React.isValidElement(child)) {
-            return null
-          }
-          const childProps = {
-            ...child.props,
-            active: idx === selectIndex,
-            index: idx,
-            inactiveColor,
+        <TabbarContext.Provider
+          value={{
+            selectIndex,
             activeColor,
+            inactiveColor,
             handleClick: setSelectIndex,
-          }
-          return React.cloneElement(child, childProps)
-        })}
+          }}
+        >
+          {React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) return null
+            return React.cloneElement(child, { ...child.props, index })
+          })}
+        </TabbarContext.Provider>
       </div>
       {(fixed || safeArea) && <div className={`${classPrefix}-safe-area`} />}
     </div>

src/packages/tabbaritem/tabbaritem.taro.tsx

@@ -1,29 +1,23 @@
-import React, { FunctionComponent, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Badge from '@/packages/badge/index.taro'
+import TabbarContext from '@/packages/tabbar/context'
 
 export interface TabbarItemProps extends BasicComponent {
   title: ReactNode
   icon: ReactNode
-  active: boolean
-  activeColor: string
-  inactiveColor: string
-  index: number
   value: ReactNode
   dot: boolean
   max: number
   top: string
   right: string
-  handleClick: (idx: number) => void
 }
 
 const defaultProps = {
   ...ComponentDefaults,
   title: '',
   icon: null,
-  active: false,
-  index: 0,
   value: '',
   dot: false,
   max: 99,
@@ -34,26 +28,25 @@ const defaultProps = {
 export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
   props
 ) => {
+  const ctx = useContext(TabbarContext)
   const {
     className,
     style,
     title,
     icon,
-    active,
-    activeColor,
-    inactiveColor,
-    index,
     value,
     dot,
     max,
     top,
     right,
-    handleClick,
+    // @ts-ignore
+    index,
     ...rest
   } = {
     ...defaultProps,
     ...props,
   }
+  const active = index === ctx?.selectIndex
   const classPrefix = 'nut-tabbar-item'
   const tabbarItemClass = classNames(
     classPrefix,
@@ -73,17 +66,17 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     max,
     top,
     right,
-    color: activeColor,
+    color: ctx?.activeColor,
   }
 
   return (
     <div
       className={tabbarItemClass}
       style={{
-        color: active ? activeColor : inactiveColor,
+        color: active ? ctx?.activeColor : ctx?.inactiveColor,
         ...style,
       }}
-      onClick={() => handleClick(index)}
+      onClick={() => ctx?.handleClick(index)}
       {...rest}
     >
       {icon ? (

src/packages/tabbaritem/tabbaritem.tsx

@@ -1,29 +1,23 @@
-import React, { FunctionComponent, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Badge from '@/packages/badge/index'
+import TabbarContext from '@/packages/tabbar/context'
 
 export interface TabbarItemProps extends BasicComponent {
   title: ReactNode
   icon: ReactNode
-  active: boolean
-  activeColor: string
-  inactiveColor: string
-  index: number
   value: ReactNode
   dot: boolean
   max: number
   top: string
   right: string
-  handleClick: (idx: number) => void
 }
 
 const defaultProps = {
   ...ComponentDefaults,
   title: '',
   icon: null,
-  active: false,
-  index: 0,
   value: '',
   dot: false,
   max: 99,
@@ -34,26 +28,25 @@ const defaultProps = {
 export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
   props
 ) => {
+  const ctx = useContext(TabbarContext)
   const {
     className,
     style,
     title,
     icon,
-    active,
-    activeColor,
-    inactiveColor,
-    index,
     value,
     dot,
     max,
     top,
     right,
-    handleClick,
+    // @ts-ignore
+    index,
     ...rest
   } = {
     ...defaultProps,
     ...props,
   }
+  const active = index === ctx?.selectIndex
   const classPrefix = 'nut-tabbar-item'
   const tabbarItemClass = classNames(
     classPrefix,
@@ -73,17 +66,17 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     max,
     top,
     right,
-    color: activeColor,
+    color: ctx?.activeColor,
   }
 
   return (
     <div
       className={tabbarItemClass}
       style={{
-        color: active ? activeColor : inactiveColor,
+        color: active ? ctx?.activeColor : ctx?.inactiveColor,
         ...style,
       }}
-      onClick={() => handleClick(index)}
+      onClick={() => ctx?.handleClick(index)}
       {...rest}
     >
       {icon ? (