React实现类似于Vue中的插槽的项目实践.docx

第

React实现类似于Vue中的插槽的项目实践

目录搭建项目实现方式1实现方式2最终效果展示最近刚开始接触React，感觉React比Vue更灵活一些，但是感觉代码确实维护的时候可读性也没有Vue好（可能是因为我太菜了），Vue中很多都是自己的API,看到这个api就知道想要实现的是什么功能，但是react需要自己去读一下代码或者有好的代码注释习惯更好。

比如Vue中有一个插槽的概念，可以任意放置内容，那么灵活的React要怎么实现这个功能呢，这篇文章主要就是记录一下React实现类似于Vue中的插槽的效果

搭建项目

//创建项目

npxcreate-react-appmy-app--templatetypescript

//运行项目

yarnstart

首先，我们需要将代码中的一些无用代码都删除掉，只留下index.tsx和App.tsx即可；

新建react-slot文件夹，文件夹内新建index.tsx；

新建NavBar组件和navbar.css样式文件；

完成之后，结构如下：

实现方式1

使用props.children

//NavBar.tsx

importReactfromreact

import./navbar.css

typeProps={

children:any[]

constNavBar=(props:Props)={

return(

divclassName=navbar-container

divclassName=navbar-left

{props.children[0]}

/div

divclassName=navbar-center

{props.children[1]}

/div

divclassName=navbar-right

{props.children[2]}

/div

/div

exportdefaultNavBar

//index.tsx

importReactfromreact

importNavBarfrom./NavBar

constReactSlot=()={

return(

div

NavBar

divleft---这里内容可以随意填充/div

divcenter---这里内容可以随意填充/div

divright---这里内容可以随意填充/div

/NavBar

/div

exportdefaultReactSlot

实现方式2

实现方式1比较好理解，但是存在一个缺陷三个子元素缺1不可，并且顺序不可以错误，代码不宜读；

实现方式2则是通过传值的方式，将jsx代码传递过去，可以一一对应，并且使用leftSlot等语义化的词使得功能更易理解；

//NavBar.tsx

importReact,{ReactNode}fromreact

import./navbar.css

typeProps={

leftSlot:ReactNode

centerSlot:ReactNode

rightSlot:ReactNode

constNavBar=(props:Props)={

return(

divclassName=navbar-container

divclassName=navbar-left

{props.leftSlot}

/div

divclassName=navbar-center

{props.centerSlot}

/div

divclassName=navbar-right

{props.rightSlot}

/div

/div

exportdefaultNavBar

//index.tsx

importReactfromreact

importNavBarfrom./NavBar

constReactSlot=()={

return(

div

NavBar

leftSlot={divleft---这里内容可以随意填充/div}

centerSlot={divcenter---这里内容可以随意填充/div}

rightSl