React-组件children,类似于Vue中的slot

在React中,可以使用`props.children`来实现类似Vue中插槽的功能,允许父组件向子组件传递内容。子组件可以接收并渲染这些内容。对于Vue的具名插槽,React可以通过传递特定属性如`props.lineTop`、`props.lineBot`来实现内容在预设位置的展示。这样,父组件可以自由地控制子组件内的布局和内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 背景

在使用Vue开发组件时,为了能让组件内部更好的自定义,我们可以通过<slot />插槽标签进行占位,可通过name等属性确保对应内容展示到对应位置中,那么在React中如果想达到这样的效果要如何处理呢?

2. 子组件props.children

在props下有children属性,对应父组件调用子组件,子组件开始结束标签中的内容。据此子组件可以这样定义

import './index.scss'

export default function Card(props) {
    return (
        <div className='container'>
            {props.children}
        </div>
    )
}

3. 父组件调用

在父组件中调用子组件,并可以在父组件中自定义所需内容

import Card from "../../components/Card";

<Card>
	<div>
		<SelfTitle title='card1' mb='mb8'/>
		<p>
			这是card中的各种内容
		</p>
	</div>
</Card>

4. vue具名插槽slot -> react props.[名称]

  • vue中拥有具名插槽,父组件调用子组件时可以将内容固定在某个特定的位置或结构中,react中可以吗?当然可以,我们可以直接将某个组件作为一个属性传给子组件中。
  • 我们可以通过props.lineTop[占位内容名称]放置在对应某个结构处,当某个组件的结构我们已知,例如sidebar位置在左侧,右侧上方是header,下方是footer,这样的结构,那么我们就可以对应位置放置props.sidebar、props.header、props.footer使用CSS令其在某个位置,定义好框架的样式,在父组件中就可以调用,并通过组件传参的方式,传入对应的内容啦

5. 完整代码

  • 子组件: 接收children默认内容,以及具名内容,并通过css固定位置样式
import './index.scss'

export default function Card(props) {
    return (
        <div className='container'>
            <div className='line-top'>
                {props.lineTop}
            </div>
            <div>
                {props.children}
            </div>
            <div className='line-bottom'>
                {props.lineBot}
            </div>
        </div>
    )
}
  • 父组件调用: 可以传组件,也可以传自定义的html结构
import Card from "../../components/Card";

<Card
	lineTop={<SelfTitle title='lineTop' mb='mb8'/>}
	lineBot={<div>这是底部内容<h1>哈哈哈</h1></div>}
>
	<div>
		这是想放在其他位置的内容
	</div>
</Card>

如果有用,点个赞呗~

总结用法,希望可以帮助到你,
我是Ably,你无须超越谁,只要超越昨天的自己就好~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值