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. 首先，我们需要将代码中的一些无用代码都删除掉，只留下index.tsx 和 App.tsx 即可；

2. 新建 react-slot 文件夹，文件夹内新建 index.tsx；

3. 新建 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;
}

两种实现方式的页面效果都一样，如下图所示：