插槽的使用,需要在组件标签内部组合jsx内心,进行传递,因为jsx本身就是一个js对象,插槽直接使用隐藏属性children直接渲染到页面,也可以是数组或者对象,通过索引或者属性实现具名插槽。
一、匿名插槽
当我们在引用组件的时候,还想在组件中额外显示其他内容,如,引用了<Sub></Sub>组件,想在此组建中额外加一个“我想要暴富”内容。可以直接<Sub><div>我想要暴富</div></Sub>,然后在组件中通过this.props.children来展示内容。children是props自带的一个影藏属性,当引用的组件中放入内容是,会自动被props中的children属性接收。
import React, { Component } from 'react'
export default class Solt extends Component {
render() {
return (
<div>
<Sub>
<div>我想暴富</div>
</Sub>
</div>
)
}
}
class Sub extends Component {
render() {
return (
<div>子组件
{this.props.children}
</div>
)
}
}
二、具名插槽
1、 给插槽做标记,我们会在引用的组件中插入不知一段内容,可能是多段,但是插入的内容我们想按照自己的顺序排放,这时候可以给children加下标来实现,如,我想暴富,我想暴瘦,我想暴运,第一个意愿是我想暴瘦,类似于vue中的具名插槽。
import React, { Component } from 'react'
export default class Solt extends Component {
render() {
return (
<div>
<Sub>
<div>我想暴富</div>
<div>我想暴瘦</div>
<div>我想暴运</div>
</Sub>
</div>
)
}
}
class Sub extends Component {
render() {
return (
<div>子组件
{this.props.children[1]}
{this.props.children[0]}
{this.props.children[2]}
</div>
)
}
}
2、自己起名字,传一段内容,然后在想调用的地方调用
import React, { Component } from 'react'
export default class Solt extends Component {
render() {
return (
<div>
<Sub top={<p>我是展示在top的内容</p>} bottom={<p>我是展示在bottom的内容</p>}>
<div>我想暴富</div>
<div>我想暴瘦</div>
<div>我想暴运</div>
</Sub>
</div>
)
}
}
class Sub extends Component {
render() {
return (
<div>子组件
{this.props.top}
{this.props.children[1]}
{this.props.children[0]}
{this.props.children[2]}
{this.props.bottom}
</div>
)
}
}
三、作用
1、为了复用,如轮播图
2、一定程度上减少父子通信,如果逻辑复杂会出现代码冗余