Taro 3.3.14框架react版本插槽

// 顶部栏
// children是你的传入的子元素页面一定是这个属性
export const Title: FC<topTitleProps> = ({ children, bgColor }) => {
    const title = {
        backgroundColor: bgColor,
        paddingTop:bbc.top+'px'
    }
    const capsule = {
        height:bbc.height + 'px',
        padding:'0 '+bbcr+'px'
    }
    return (
        <View className={style.topTitleBox} style={title}>
           
            <View className="test" style={capsule}>
                {/* 使用它 */}
                {children}
            </View>
        </View>
    )
}

import { Button, Icon, View,Image,Text } from "@tarojs/components";
import { FC } from "@tarojs/taro";
// 引用该组件Title
import {Title,Box} from "@comp/rabbet";
import logo from "@asset/images/logo.png";
import style from "./index.module.scss"

console.log(style);
// vertical-center
// className={`${style.search} vertical-center`}
const Home:FC = () => {
    return(
        <View className={style.home}>
            <Title bgColor='#000'>
                {/* 直接写，子组件会获取到你的这个节点属性 */}
                <View className='search-box vertical-center'>
                    <Image className='logo' src={logo}></Image>
                    <View className='search vertical-center'>
                        <Icon size='15' color='#eec482' type='search' />
                        <Text>请输入关键字搜索</Text>
                    </View>
                </View>
            </Title>
            <Box>
                <Button className='fs-36'>
                        请点击
                </Button>
            </Box>
        </View>
    )
}

export default Home