react 父子组件 子组件多个return

父组件

import { Genre } from './Genre'
import { Tab } from 'components/Tab'
import { useCatlist } from 'hooks/playlist'

export default function Search() {
    const { data: catlist, error, isLoading, isError } = useCatlist()
    const  allData=  ['综艺', '流行', '影视原声', '华语', '清晨', '怀旧', '摇滚', 'ACG', '欧美', '清新', '夜晚', '儿童', '民谣', '日语', '浪漫', '学习', '校园', '韩语', '工作', '电子', '粤语', '舞曲', '伤感', '午休', '游戏', '下午茶', '70后', '治愈', '说唱', '轻音乐', '80后', '地铁', '放松', '90后', '爵士', '驾车', '孤独', '乡村', '运动', '感动', '网络歌曲', '兴奋', 'R&B/Soul', '旅行', 'KTV', '经典', '快乐', '散步', '古典', '安静', '酒吧', '翻唱', '民族', '吉他', '思念', '英伦', '钢琴', '金属', '朋克', '器乐', '蓝调', '榜单', '雷鬼', '00后', '世界音乐', '拉丁', 'New Age', '古风', '后摇', 'Bossa Nova']

    return (
        <Genre catlist={allData || []} />
    )
}

子组件

import styled from '@emotion/styled'
import { Typography } from '@mui/material'
import { Main } from '../Home/Gallery'
import { Box } from '@mui/system'
import { getBgcolorByIndex } from 'themes'
import { fetchPlayLists } from 'api/playlist'
import { Cat } from 'types/playlist'
import { Badge, Avatar } from '@douyinfe/semi-ui';

export const Genre = ({ catlist }: { catlist: string[] }) => {
    console.log(catlist)
    return (
        <div>
            <Title />
            <Tetx/>
            <Main>
                {catlist.map((cat, index) => (
                    <GenreCard cat={cat} key={cat} index={index} />
                ))}
            </Main>
        </div>
    )
}


export const Title = () => {
    return (
        <Typography
            variant={'h2'}
            sx={{ fontSize: '2.5rem', fontWeight: '700', marginTop: '1.2rem' }}
        >
            这是全部分类
        </Typography>
    )
}

export const Tetx = () => {
    return (
        <div>这是全部分类</div>
    )
}

interface ICard {
    index: number
}

interface ItemC {
    cat: Cat
}

interface IGenreCard extends ICard {
    cat: Cat
}

export const GenreCard = ({ cat, index }: IGenreCard ) => {
    // console.log("知乎",{ cat, index })
    const handleClick = () => {
        
        console.log({ cat, index })
        fetchPlayLists(cat).then((playlist) => console.log(playlist))
    }
    return (
        <div  onClick={handleClick}>
            <CardTitle cat={cat} index={index}  />
        </div>
    )
}



export const CardTitle = ({ cat, index }: IGenreCard) => {

    const style = {
        width: '182px',
        height: '42px',
        borderRadius: '4px',
    };
    return (

            

            <Badge count={index+1} type='primary' >
                <Avatar color='violet' shape='square' style={style}>{cat}/类别名称</Avatar>
            </Badge>
        
    )
}