React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React 插槽

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

作者：学习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

实现方式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 插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文