React實現(xiàn)類似于Vue中的插槽的項目實踐

更新時間：2022年05月24日 10:43:40 作者：學習801

本文主要介紹了React實現(xiàn)類似于Vue中的插槽的項目實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近剛開始接觸React，感覺React比Vue更靈活一些，但是感覺代碼確實維護的時候可讀性也沒有Vue好（可能是因為我太菜了），Vue中很多都是自己的API, 看到這個api就知道想要實現(xiàn)的是什么功能，但是react 需要自己去讀一下代碼或者有好的代碼注釋習慣更好。

比如 Vue 中有一個插槽的概念，可以任意放置內(nèi)容，那么靈活的 React要怎么實現(xiàn)這個功能呢，這篇文章主要就是記錄一下“React實現(xiàn)類似于Vue中的插槽的效果”

搭建項目

// 創(chuàng)建項目
npx create-react-app my-app --template typescript

// 運行項目
yarn start

首先，我們需要將代碼中的一些無用代碼都刪除掉，只留下index.tsx 和 App.tsx 即可；
新建 react-slot 文件夾，文件夾內(nèi)新建 index.tsx；
新建 NavBar 組件和 navbar.css 樣式文件；

完成之后，結(jié)構(gòu)如下：

實現(xiàn)方式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---這里內(nèi)容可以隨意填充</div>
        <div>center---這里內(nèi)容可以隨意填充</div>
        <div>right---這里內(nèi)容可以隨意填充</div>
      </NavBar>
    </div>
  )
}

export default ReactSlot

實現(xiàn)方式2

實現(xiàn)方式1比較好理解，但是存在一個缺陷——三個子元素缺1不可，并且順序不可以錯誤，代碼不宜讀；

實現(xiàn)方式2則是通過傳值的方式，將 jsx 代碼傳遞過去，可以一一對應(yīng)，并且使用 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---這里內(nèi)容可以隨意填充</div>}
        centerSlot={<div>center---這里內(nèi)容可以隨意填充</div>}
        rightSlot={<div>right---這里內(nèi)容可以隨意填充</div>}
      ></NavBar>
    </div>
  )
}

export default ReactSlot

最終效果展示

上面兩種實現(xiàn)方式都是使用這份 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;
}