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 樣式文件；
完成之后，結構如下：
實現(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 代碼傳遞過去，可以一一對應，并且使用 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;
}兩種實現(xiàn)方式的頁面效果都一樣，如下圖所示：
到此這篇關于React實現(xiàn)類似于Vue中的插槽的項目實踐的文章就介紹到這了,更多相關React 插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
ReactQuery系列之數(shù)據(jù)轉換示例詳解
這篇文章主要為大家介紹了ReactQuery系列之數(shù)據(jù)轉換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文通過實例給大家分享了編寫React組件項目實踐的全過程，對此有興趣的朋友可以參考下。2018-03-03
在構建現(xiàn)代Web應用程序時,前端路由是一個不可或缺的部分,今天,我們將討論如何在React中使用React Router來實現(xiàn)頁面導航,在這篇博客中,我們將會探索路由的基本概念,設置React Router,并通過示例代碼來展示如何實現(xiàn)復雜的頁面導航,需要的朋友可以參考下2025-02-02
React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React 提供了 refrefref 屬性，讓我們可以引用組件的實例或者原生 DOM 元素,使用 refrefref，可以在父組件中調用子組件暴露出來的方法，或者調用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-07-07
懶加載是一種優(yōu)化技術,旨在延遲加載不必要的資源,直到它們真正需要時再進行加載,那么React的懶加載是如何實現(xiàn)的呢,下面小編就來和大家詳細講講吧2025-03-03
這篇文章主要介紹了React組件中的this的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了React.js入門學習第一篇，詳細解析React.js基礎知識，全方位的了解React.js，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要給大家介紹了關于React學習之事件綁定的幾種方法對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09