import React , { FunctionComponent } from "react" ; import { ComponentOptions } from "@tarojs/taro" ; import { View , Text } from "@tarojs/components" ; import "./index.scss" ; interface TitleTplProps { title : string ; data : any [ ] ; activeIndex : number ; onWayClick : ( ... args : any ) => void ; } export const TitleTpl = props => { const { title = "" , data = [ ] , onWayClick = ( ) => { } , activeIndex = 0 } = props ; const handleClick = ( item , index ) => ( ) => { onWayClick ( item , index ) ; } ; return ( < View className = "compute-way" > < Text className = "compute-way__title" > { title } < /Text> < View className = "compute-way__way-box" > { data . map ( ( item , index ) => { return ( < View key = { item . id } onClick = { handleClick ( item , index ) } className = "pseudo-content" > < Text className = { `pseudo-content__text ${ activeIndex === item . index ? "pseudo-content__text-active" : "" }` } > { item . name } < /Text> { activeIndex === item . index && ( < View className = "pseudo-content__pseudo" / > ) } < /View>); } ) } < /View> < /View>); } ; TitleTpl . options = { addGlobalClass : true } ;