一. 介绍
image.png
- 以京东m页的导航栏为例。
- 实现Vue中类似slot的功能。
- React中jsx可以直接把元素当数据返回，所以不需要slot。
二. 子组件布局
<NavBar>
<span>aaa</span>
<div>bbb</div>
<b>ccc</b>
</NavBar>
把想要的东西放到子组件标签内。
子组件中的标签，都被放到this.props.children内。
追溯到createElement源码。
所有的属性都放在config中，源码中对config做了一个遍历，把所有的属性名称存在了props中。这就是为什么给子组件数据，数据会在props中的原因。
子组件所有的子标签放在children中，把数组遍历赋值给childArray[i]，然后把这个数组赋值给props.children，所以children对应父组件中子组件标签中包含的子标签。
render() {
return (
<div className="nav-bar">
<div className="nav-left"></div>
<div className="nav-center"></div>
<div className="nav-right"></div>
</div>
)
}
- 导航栏中对传入的children进行规划。
- 布局：在子组件文件中，并列三个不同className的div。
三. css设定
image.png
.nav-bar {
display: flex;
}
.nav-left, .nav-right{
height: 44px;
width: 70px;
background-color: red;
}
.nav-center {
flex: 1;
height: 44px;
background-color: blue;
}
- 这个时候默认有边距，我们给body补上padding和margin为0就可以。
- 现在已经把子组件中内容划分清楚了。
四. 子组件内容填充
image.png
image.png
- 如上图所示
- 顺序不能乱，当然如果要想精准的布局，需要用更好的方法。
五. React化用slot
image.png
image.png
image.png
- 通过单标签方式属性赋值的方式，在子组件中进行对象解构赋值，效果完全一样。
