12.React学习笔记.React实现slot

一. 介绍

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

• 通过单标签方式属性赋值的方式，在子组件中进行对象解构赋值，效果完全一样。