React模拟Vue插槽

521 阅读1分钟

序言

项目开发过程中经常会遇到公共组件的封装,熟悉 Vue 的都知道可以使用 slot 插槽来实现各种复杂的场景,但是 React 中并没有提供相应的 API ,如何用 React 实现相同的功能?

Vue 项目中使用:

  1. 定义模版 base-layout.vue

image.png

  1. 使用模版 base-layout.vue image.png

现在<template>元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有v-slot<template>中的内容都会被视为默认插槽的内容。

React 项目中使用:

  1. 定义模版 base-layout.js

image.png React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法,根据不同的 slot 进行插槽分发;

  1. 使用模版 base-layout.js

image.png

到这里就可以在 React 中使用 slot 功能了。


第一次写文章,内容难免有所疏漏,欢迎批评指导 (●'◡'●)


参考文档