序言
项目开发过程中经常会遇到公共组件的封装,熟悉 Vue 的都知道可以使用 slot 插槽来实现各种复杂的场景,但是 React 中并没有提供相应的 API ,如何用 React 实现相同的功能?
Vue 项目中使用:
- 定义模版
base-layout.vue
- 使用模版
base-layout.vue
现在<template>元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有v-slot的<template>中的内容都会被视为默认插槽的内容。
React 项目中使用:
- 定义模版
base-layout.js
React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法,根据不同的 slot 进行插槽分发;
- 使用模版
base-layout.js
到这里就可以在 React 中使用 slot 功能了。
第一次写文章,内容难免有所疏漏,欢迎批评指导 (●'◡'●)