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

目录
  • 搭建项目
  • 实现方式1
  • 实现方式2
  • 最终效果展示

最近刚开始接触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 插槽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React插槽使用方法

    目录 需求 核心思想 React实现插槽的两种方式 需求 我们自己写了个组件,引用组件时想要在组件中写入内容,并且写入的内容可以被组件识别.控制,用过Vue的同学肯定会立刻想到slot插槽,react也支持插槽功能,下面我们用react开发一个支持插槽功能的组件. 核心思想 父组件在子组件中传入的三个div,这三个div会默认通过props传到子组件中,然后我们在子组件中控制children的渲染即可. 核心代码 // 015 使用插槽 import React from 'react'; im

  • 使用react context 实现vue插槽slot功能

    首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n

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

    目录 搭建项目 实现方式1 实现方式2 最终效果展示 最近刚开始接触React,感觉React比Vue更灵活一些,但是感觉代码确实维护的时候可读性也没有Vue好(可能是因为我太菜了),Vue中很多都是自己的API, 看到这个api就知道想要实现的是什么功能,但是react 需要自己去读一下代码或者有好的代码注释习惯更好. 比如 Vue 中有一个插槽的概念,可以任意放置内容,那么灵活的 React要怎么实现这个功能呢,这篇文章主要就是记录一下“React实现类似于Vue中的插槽的效果” 搭建项目

  • 详解Vue中使用插槽(slot)、聚类插槽

    一.基本的插槽 这里总结两点 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示 (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往子组件中 插入的标签 这里就代表组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> 这里如果是这样的 <child> </child> 就会显示 <sl

  • Vue中slot插槽作用与原理详解

    目录 1.作用 2.插槽内心 2.1.默认插槽 2.2.具名插槽(命名插槽) 2.3.作用域插槽 实现原理 1.作用 父组件向子组件传递内容 扩展.复用.定制组件 2.插槽内心 2.1.默认插槽 把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据. 子组件 <template> <div class="slotChild"> <h4>{{msg}}</h4> <slot>这是子组件插槽默认的值&

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • vue中transition组件在项目中运用小结

    ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果.transition组件的动画效果过渡设置基于css的transition属性设置.下面给大家介绍下vue中transition组件在项目中运用. 单个弹入弹出运用 注意: name的名字为多少,则下面的样式class开头就要为多少 通过v-if来配合执行动画效果 <template> <div> <button v-on:click="show =

  • Element中使用ECharts的项目实践

    目录 一.引入ECharts 1.直接引入echarts (安装echarts项目依赖) 2.全局引入 (我们安装完成之后,可以在main.js中全局引入 echarts) 3.我们可以将Echar封装成组件的形式,方便调用 4.此时我们可以通过Echart官网引入我们需要的图 二.效果展示 一.引入ECharts 1.直接引入echarts (安装echarts项目依赖) npm install echarts --save 2.全局引入 (我们安装完成之后,可以在main.js中全局引入 e

  • vue mixins代码复用的项目实践

    目录 导语: 场景: 1. 代码里有很多当前组件需要的纯函数,methods过多 2. 举个例子你有一个组件需要抛出两个数据,直接的v-model不适用.需要采用$emit方法 3. 同理,可以通过这个方式复用很多data数据,避免模板化的声明 总结: 导语: 两年前来到新公司,开始使用vue开发,代码复用程度比较低.到后期大量的开发经验,以及看了一些设计模式类的书籍.才开始慢慢总结一些代码复用的经验.分享出来, PS: Vue版本2.6 场景: 1. 代码里有很多当前组件需要的纯函数,meth

  • vue中的插槽详解

    vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot ) 插槽的分类 默认插槽 具名插槽 作用域插槽 当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了, 如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽 当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽 下面展示一下, 默认插槽的用法 使用时 以上就是默认插槽的使用 具名插槽, 也就是说我们在组件中定一个 多个 slot , 为

  • vue和react中关于插槽详解

    目录 简述Slot 基本插槽 vue基本插槽 react基本插槽 具名插槽 vue具名插槽 react具名插槽的讨论 模仿具名插槽 属性插槽 插槽传参 vue插槽传参 react:render-props 简述Slot slot插槽是Vue对组件嵌套这种扩展机制的称谓,在react可以也这样称呼,但是并不很常见.不过叫slot确实很形象. 这样的形式就是slot插槽: vue <template> <container-comp> <content></conte

  • vue中插槽整理及用法分析

    本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. vue的插槽(slot)主要分三种: 默认插槽,具名插槽,作用域插槽 vue中的插槽,指的是子组件中提供给父组件使用的一个占位符: 用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替换掉子组件的标签(替换占位符). 默认插槽 默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果. 语法: 在子组件中放置一个占位符(slot): <

随机推荐