React實現類似於Vue中的插槽的項目實踐

Posted on by

最近剛開始接觸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 插槽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：