React实现类似于Vue中的插槽的项目实践
时间：2022-08-11 11:26:54|栏目：|点击： 次
最近刚开始接触React，感觉React比Vue更灵活一些，但是感觉代码确实维护的时候可读性也没有Vue好（可能是因为我太菜了），Vue中很多都是自己的API, 看到这个api就知道想要实现的是什么功能，但是react 需要自己去读一下代码或者有好的代码注释习惯更好。
比如 Vue 中有一个插槽的概念，可以任意放置内容，那么灵活的 React要怎么实现这个功能呢，这篇文章主要就是记录一下“React实现类似于Vue中的插槽的效果”
搭建项目
// 创建项目 npx create-react-app my-app --template typescript // 运行项目 yarn start
首先，我们需要将代码中的一些无用代码都删除掉，只留下index.tsx 和 App.tsx 即可；
新建 react-slot 文件夹，文件夹内新建 index.tsx；
新建 NavBar 组件和 navbar.css 样式文件；
完成之后，结构如下：
实现方式1
使用
props.children
// NavBar.tsx
import React from 'react'
import './navbar.css'
type Props = {
children: any[]
}
const NavBar = (props:Props) => {
return (
<div className='navbar-container'>
<div className='navbar-left'>
{props.children[0]}
</div>
<div className='navbar-center'>
{props.children[1]}
</div>
<div className='navbar-right'>
{props.children[2]}
</div>
</div>
)
}
export default NavBar
// index.tsx
import React from 'react'
import NavBar from './NavBar'
const ReactSlot = () => {
return (
<div>
<NavBar>
<div>left---这里内容可以随意填充</div>
<div>center---这里内容可以随意填充</div>
<div>right---这里内容可以随意填充</div>
</NavBar>
</div>
)
}
export default ReactSlot
实现方式2
实现方式1比较好理解，但是存在一个缺陷——三个子元素缺1不可，并且顺序不可以错误，代码不宜读；
实现方式2则是通过传值的方式，将 jsx 代码传递过去，可以一一对应，并且使用 leftSlot 等语义化的词使得功能更易理解；
// NavBar.tsx
import React, { ReactNode } from 'react'
import './navbar.css'
type Props = {
leftSlot: ReactNode
centerSlot: ReactNode
rightSlot: ReactNode
}
const NavBar = (props:Props) => {
return (
<div className='navbar-container'>
<div className='navbar-left'>
{props.leftSlot}
</div>
<div className='navbar-center'>
{props.centerSlot}
</div>
<div className='navbar-right'>
{props.rightSlot}
</div>
</div>
)
}
export default NavBar
// index.tsx
import React from 'react'
import NavBar from './NavBar'
const ReactSlot = () => {
return (
<div>
<NavBar
leftSlot={<div>left---这里内容可以随意填充</div>}
centerSlot={<div>center---这里内容可以随意填充</div>}
rightSlot={<div>right---这里内容可以随意填充</div>}
></NavBar>
</div>
)
}
export default ReactSlot
最终效果展示
上面两种实现方式都是使用这份 css 样式
// navbar.css
.navbar-container {
display: flex;
height: 50px;
flex-direction: row;
text-align: center;
line-height: 50px;
}
.navbar-left {
width: 20%;
background-color: plum;
}
.navbar-center {
width: 60%;
background-color: bisque;
}
.navbar-right {
width: 20%;
background-color: lavender;
}
两种实现方式的页面效果都一样，如下图所示：
上一篇：不错的“木马”万能查杀法
栏 目：
下一篇：docker-compose配置并部署redis服务的实现
本文地址：http://www.codeinn.net/misctech/210434.html
