React - 插槽

---

什么是插槽

在 Vue 中专门为我们提供了插槽这样一个概念，不过与 React 的插槽还是有些区别的，其实 React 的插槽很容易理解，我们根据一个例子来引出：我们都知道组件之间通信的时候我们会经常使用 context 方案，那么为什么包裹在 GlobalContext.Provider 中的组件可以正常显示，而下面的这段代码却不能显示呢？

import React, { Component } from "react"

class Son extends Component {
	render() {
		return (
			<section>
				<span>Hello React</span>
			</section>
		)
	}
}

export default class App extends Component {
	render() {
		return (
			<section>
				<Son>
					<span> 🚀 </span>
				</Son>
			</section>
		)
	}
}

// 页面显示 Hello React ，没有显示 Son 组件中包裹的 🚀
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这就引出我们的插槽了，使用插槽我们就可以将 Son 子组件中包裹的结构也显示出来了：在子组件中使用 this.props.children 就可以访问到了

import React, { Component } from "react"

class Son extends Component {
	render() {
		return (
			<section>
				<span>Hello React</span>
				{this.props.children}
				{this.props.children}
				{this.props.children}
			</section>
		)
	}
}

export default class App extends Component {
	render() {
		return (
			<section>
				<Son>
					<span> 🚀 </span>
				</Son>
			</section>
		)
	}
}

// 页面显示 Hello React 🚀 🚀 🚀
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

COOL!! 😀

所以我们应该怎么理解？？ 一句话：相当于把这些标签或者说页面结构当成属性一样挂载到了子组件上，子组件通过 props 属性语法即可访问到并插入到我们的子组件页面结构当中

如果我们放置多个标签，想要自己控制内容的排序也很简单，插槽获取到的是一个数组

import React, { Component } from "react"

class Son extends Component {
	render() {
		console.log(this.props.children)
		return (
			<section>
				<span>Hello React</span>
				{this.props.children}
				{this.props.children}
				{this.props.children}
			</section>
		)
	}
}

export default class App extends Component {
	render() {
		return (
			<section>
				<Son>
					<br></br>
					<span> 🚀 1</span>
					<br></br>
					<span> 🚀 2</span>
					<br></br>
					<span> 🚀 3</span>
					<br></br>
				</Son>
			</section>
		)
	}
}

// Hello React
// 🚀 1
// 🚀 2
// 🚀 3

// 🚀 1
// 🚀 2
// 🚀 3

// 🚀 1
// 🚀 2
// 🚀 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

既然它是一个数组，那么排序也就不算一个问题了 😁

import React, { Component } from "react"

class Son extends Component {
	render() {
		console.log(this.props.children)
		return (
			<section>
				<span>Hello React</span>
				{this.props.children[6]}
				{this.props.children[5]}
				{this.props.children[4]}
				{this.props.children[3]}
				{this.props.children[2]}
				{this.props.children[1]}
				{this.props.children[0]}
			</section>
		)
	}
}

export default class App extends Component {
	render() {
		return (
			<section>
				<Son>
					<br></br>
					<span> 🚀 1</span>
					<br></br>
					<span> 🚀 2</span>
					<br></br>
					<span> 🚀 3</span>
					<br></br>
				</Son>
			</section>
		)
	}
}

// Hello React
// 🚀 3
// 🚀 2
// 🚀 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

---

一句话说明白插槽有什么用处？

尽可能减少父子通信

标签在父组件中可以访问到父组件中的状态，使用插槽把标签显示在页面子组件中，省略了父子通信

• 缺点：我们不应该过多的使用这种方法，否则会造成父组件的臃肿，这是大忌

省去繁琐的判断 增加复用性

子组件填充插槽开发好空间布局，在父组件中子标签可以随意的书写所需要的结构或者样式，提高复用性，不需要繁琐的进行判断，节省代码量，更易阅读