最近剛開始接觸React，感覺React比Vue更靈活一些，但是感覺代碼確實(shí)維護(hù)的時(shí)候可讀性也沒有Vue好（可能是因?yàn)槲姨肆耍?，Vue中很多都是自己的API, 看到這個(gè)api就知道想要實(shí)現(xiàn)的是什么功能，但是react 需要自己去讀一下代碼或者有好的代碼注釋習(xí)慣更好。

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

搭建項(xiàng)目

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

// 運(yùn)行項(xiàng)目
yarn start

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

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

實(shí)現(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

實(shí)現(xiàn)方式2

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

實(shí)現(xiàn)方式2則是通過傳值的方式，將 jsx 代碼傳遞過去，可以一一對(duì)應(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

最終效果展示

上面兩種實(shí)現(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;
}