Taro 封装Grid布局

Taro 封装Grid布局

HGrid

API

参数	说明	类型	默认值	必填
column	一行的个数	number	-	是
rowGap	行间距	number	-	否
column	列间距	number	-	否
children	子组件	ReactNode	-	是

完整代码

index.tsx

import { View } from "@tarojs/components"
import React, { ReactNode } from "react"

interface HGridProps {
    column: number, // 一行的个数
    rowGap?: number, // 行间距
    columnGap?: number, // 列间距
    children: ReactNode
}

const HGrid = (props: HGridProps) => {
    const {
        column,
        rowGap,
        columnGap,
        children
    } = props
    // 根据行内的个数进行累加
    const cumulative = () => {
        let res = ''
        for (let i = 0; i < column; i++) {
            res += '1fr '
        }
        return res.trimEnd()
    }
    return (
        <View
            style={{
                display: 'grid',
                gridTemplateColumns: `${cumulative()}`,
                rowGap: `${rowGap}px`,
                columnGap: `${columnGap}px`,
                width: '100%'
            }}
        >
            {
                React.Children.map(children, child => {
                    if ((child as any)?.type?.name !== 'HGridItem') {
                        console.warn('HGrid必须嵌套HGridItem组件')
                        return null
                    }
                    return child
                })
            }
        </View>
    )
}

export default HGrid

HGridItem

const HGridItem = ({children}) => {
    return(
        <>
            {children}
        </>
    )
}

export default HGridItem