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

更新时间：2022年05月24日 10:43:40 作者：学习801

本文主要介绍了React实现类似于Vue中的插槽的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近刚开始接触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;
}

两种实现方式的页面效果都一样，如下图所示：

到此这篇关于React实现类似于Vue中的插槽的项目实践的文章就介绍到这了,更多相关React 插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React
插槽

React Native 集成 ArcGIS 地图的详细过程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,本文给大家介绍React Native 集成 ArcGIS 地图的详细过程,感兴趣的朋友跟随小编一起看看吧
2024-06-06
React使用Canvas绘制大数据表格的实例代码
之前一直想用Canvas做表格渲染的,最近发现了一个很不错的Canvas绘图框架Leafer,api很友好就试着写了一下,文中有详细的代码示例供大家参考,感兴趣的小伙伴可以自己动手试试
2023-09-09
React渲染的优化方案
react的渲染机制是非常独特的,有别于 Vue 框架的渲染次数的优化计算,React 很久以来就有PureComponent、shouldUpdate,本文小编给大家介绍了React渲染的优化方案,需要的朋友可以参考下
2024-08-08
六分钟带你快速学会react中的useMemo
简单说React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术,下面这篇文章主要给大家介绍了关于如何快速学会react中useMemo的相关资料,需要的朋友可以参考下
2022-12-12
React + Threejs + Swiper 实现全景图效果的完整代码
全景图效果非常漂亮给人带来极好的用户体验效果，那么基于前端开发如何实现这种效果呢，下面小编给大家带来了React + Threejs + Swiper 实现全景图效果，感兴趣的朋友一起看看吧
2021-06-06
React替换传统拷贝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用
2023-02-02
原生实现一个react-redux的代码示例
这篇文章主要介绍了原生实现一个react-redux的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
React forwardRef的使用方法及注意点
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧
2021-06-06
React实现全选功能
这篇文章主要为大家详细介绍了React实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
react项目实践之webpack-dev-serve
这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09