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

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，你无须超越谁，只要超越昨天的自己就好~