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
插槽

ReactQuery系列之数据转换示例详解
这篇文章主要为大家介绍了ReactQuery系列之数据转换示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
编写React组件项目实践分析
本文通过实例给大家分享了编写React组件项目实践的全过程，对此有兴趣的朋友可以参考下。
2018-03-03
使用React路由实现页面导航的示例代码
在构建现代Web应用程序时,前端路由是一个不可或缺的部分,今天,我们将讨论如何在React中使用React Router来实现页面导航,在这篇博客中,我们将会探索路由的基本概念,设置React Router,并通过示例代码来展示如何实现复杂的页面导航,需要的朋友可以参考下
2025-02-02
React createRef循环动态赋值ref问题
这篇文章主要介绍了React createRef循环动态赋值ref问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
React中的ref属性的使用示例详解
React 提供了 refrefref 属性，让我们可以引用组件的实例或者原生 DOM 元素,使用 refrefref，可以在父组件中调用子组件暴露出来的方法，或者调用原生 element 的 API,这篇文章主要介绍了React中的ref属性的使用,需要的朋友可以参考下
2023-04-04
在React中编写class样式的方法总结
在TypeScript (TSX) 中编写 CSS 样式类有几种方法,包括使用纯 CSS、CSS Modules、Styled Components 等,本文给大家介绍了几种常见方法的示例,通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-07-07
一文详解React中如何实现组件懒加载
懒加载是一种优化技术,旨在延迟加载不必要的资源,直到它们真正需要时再进行加载,那么React的懒加载是如何实现的呢,下面小编就来和大家详细讲讲吧
2025-03-03
React组件中的this的具体使用
这篇文章主要介绍了React组件中的this的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
React.js入门学习第一篇
这篇文章主要为大家介绍了React.js入门学习第一篇，详细解析React.js基础知识，全方位的了解React.js，感兴趣的小伙伴们可以参考一下
2016-03-03
React学习之事件绑定的几种方法对比
这篇文章主要给大家介绍了关于React学习之事件绑定的几种方法对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09