在react中实现类似vue中插槽的功能
2022-11-04 14:27:01
众所周知，在vue中有插槽的概念，只需要在组件中使用`<slot></slot>`进行占位，后续你可以在`<slot></slot>`标签中填入任何你需要的元素。
但是在react中并没有官方的关于插槽的说法，那么我想在react中实现类似vue中插槽那样的功能应该怎么办呢？
答案是使用props传值。props传值功能是十分强大和灵活的，它不仅仅能给子组件传递数据和方法，还可以传递react元素（div/input/button等），甚至可以将一个组件直接当成属性传递过去！
下面我们用一些例子来示范一下在类组件和函数组件中如何书写代码实现传递react元素
##例：类组件中
###父组件Register ：
```
import React, { Component } from 'react'
import Ceshi from "../11/ceshi"
class Register extends Component {
render() {
//定义两个变量
const button = <button>按钮</button>
const input = <input type="text" className='input-ceshi' />
return (
<div>
<div>我是父组件</div>
<Ceshi
button={button}
input={input}
></Ceshi> : null
</div>
)
}
}
export default Register
```
###子组件Ceshi ：
```
import React, { Component } from 'react'
export default class Ceshi extends Component {
render() {
//接收传递过来的属性，直接用this.props. 去调用也可以
const { button, input } = this.props
return (
<div>
<div>
这是一个测试用的组件
</div>
<div>
{button}
{input}
</div>
</div>
)
}
}
```
###函数组件中也是同样的写法，就不再举例子了，是不是很简单，快去试试吧