列表组件激活某一个

父组件

<NavGrid list={this.state.allAppList} icon="close-circle" checkList={this.state.checkList} title="删除" onChange={(value) => {}}></NavGrid>

子组件

import { Component } from 'react'
import Taro from '@tarojs/taro'
import classNames from 'classnames'
import { View, Image } from '@tarojs/components'
import {TAllApp} from './../../models/home/index'
import './index.scss'

interface IProps {
    title: string
    btnText?: string
    isHeader?: boolean
    list:TAllApp[],
    className: string,
    icon?:string,
    checkList:string[],
    onChildClick: (appId:string,callbackUrl:string,resourceId:string) => void
    onChange: (selectedList: Array<string>) => void
}

class NavGrid extends Component<IProps> {
    static defaultProps = {
        title: '',
        isHeader: true,
        onChildClick: () => {},
        onChange: (): void => {},
        list:[],
        icon:'',
        checkList:[],
        className:''
    }

    private handleClick(idx:number){
        const {checkList,list} = this.props
        
        const option = list[idx]
        const { resourceId } = option
        const selectSet = new Set(checkList)
        if(!selectSet.has(resourceId)){
            selectSet.add(resourceId)
        }else{
            selectSet.delete(resourceId)
        }
        this.props.onChange([...selectSet])
    }

    render() {
        const {checkList,list,className,icon,title} = this.props

        return (
            <View className="navgrid">
                {list.map((item,idx) => {
                        let {resourceId} = item
                        let itemCls:string = ''
                        if(title === '删除'){
                            itemCls = classNames('',{
                                'is-delete':checkList.includes(resourceId)
                            })
                        }
                        if(title === '新增'){
                            itemCls = classNames('',{
                                'is-add':checkList.includes(resourceId)
                            })
                        }
                        
                       return <View
                            key={item.appId}
                            className="navgrid-item"
                            onClick={() => {
                                if(this.props.icon){
                                    this.handleClick(idx)
                                }else{
                                    this.props.onChildClick(item.appId,item.callbackUrl,item.resourceId)
                                }
                            }}
                        >
                            <View className="navgrid-item-content_inner">
                                <View className="navgrid-img-wrap">
                                    <Image src={item.images} className="navgrid-img"></Image>
                                </View>
                                <View className="navgrid-item-content_text">{item.name}</View>
                            </View>
                            <View className={itemCls}>
                                {itemCls && <View className={`icon at-icon at-icon-${icon}`}></View>}
                            </View>
                        </View>
                    })}
            </View>
        )
    }
}
/* {/* <View className="navgrid_delete at-icon at-icon-close-circle"></View> */
export default NavGrid