React中實現(xiàn)插槽效果的方案詳解
React實現(xiàn)插槽
在開發(fā)中,我們抽取了一個組件,但是為了讓這個組件具備更強的通用性,我們不能將組件中的內(nèi)容限制為固定的div、span等等這些元素。
我們應(yīng)該讓使用者可以決定某一塊區(qū)域到底存放什么內(nèi)容
這種需求在Vue當中有一個固定的做法是通過slot來完成的,React呢?
在React中是沒有插槽的概念的, 或者說在React中是不需要插槽的, 因為React對于這種需要插槽的情況非常靈活,有兩種方案可以實現(xiàn):
組件的children子元素;
props屬性傳遞React元素;
children實現(xiàn)插槽
每個組件都可以獲取到 props.children
:它包含組件的開始標簽和結(jié)束標簽之間的內(nèi)容
。
例如我們實現(xiàn)一個navbar, 要求左邊, 中間, 右邊的內(nèi)容是不固定的, 由使用者來決定到底放什么
在父組件的子組件標簽中寫入要插入到子組件的元素
import React, { Component } from 'react' import NavBar from './c-cpns/NavBar' export class App extends Component { render() { return ( <div> {/* 父組件將要插入到子組件的元素寫到組件標簽中 */} <NavBar> <button>按鈕</button> <h2>標題</h2> <i>斜體</i> </NavBar> </div> ) } } export default App
在子組件中通過this.props
可以獲取到一個children
屬性, 該屬性中包含子組件標簽開始到結(jié)束之間的內(nèi)容
import React, { Component } from 'react' import './style.css' export class NavBar extends Component { render() { // 在子組件通過props中的children, 獲取到要插入的元素 const { children } = this.props return ( <div className='nav-bar'> <div className='left'> {children[0]} </div> <div className='center'> {children[1]} </div> <div className='right'> {children[2]} </div> </div> ) } } export default NavBar
注意: 如果children中有多個元素, 那么children是一個數(shù)組, 數(shù)組中存放著所有內(nèi)容; 如果只插入一個元素到子組件中, 那么children本身就是插入的該元素, 如下:
父組件中只插入了一個元素
return ( <div> {/* 父組件將要插入到子組件的元素寫到組件標簽中 */} <NavBar> <button>按鈕</button> </NavBar> </div> )
子組件直接使用children即可
render() { // 在子組件通過props中的children, 獲取到要插入的元素 const { children } = this.props return ( <div className='nav-bar'> <div className='left'> {children} </div> </div> ) }
props實現(xiàn)插槽
通過children實現(xiàn)的方案雖然可行,但是有一個弊端:通過索引值獲取傳入的元素很容易出錯,不能精準的獲取傳入的原生;
而且對順序有嚴格的要求
另外一個種方案就是使用 props 實現(xiàn)(這個方案也是開發(fā)中使用的比較多的方案, 個人更推薦):
我們之間通過具體的屬性名,可以讓我們在傳入和獲取時更加的精準;
首先在父組件通過props的方式將要插入的元素傳入到子組件中
render() { // 在子組件通過props中的children, 獲取到要插入的元素 const { children } = this.props return ( <div className='nav-bar'> <div className='left'> {children} </div> </div> ) }
再在子組件中獲取到傳遞的數(shù)據(jù)進行展示
import React, { Component } from 'react' export class NavBarTow extends Component { render() { // 在子組件中獲取到父組件傳遞過來的數(shù)據(jù) const { leftSlot, centerSlot, rightSlot } = this.props return ( <div className='nav-bar'> {/* 將傳遞過來的數(shù)據(jù)進行展示 */} <div className='left'> {leftSlot} </div> <div className='center'> {centerSlot} </div> <div className='right'> {rightSlot} </div> </div> ) } } export default NavBarTow
到此這篇關(guān)于React中實現(xiàn)插槽效果的方案的文章就介紹到這了,更多相關(guān)React實現(xiàn)插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React Native 真機斷點調(diào)試+跨域資源加載出錯問題的解決方法
下面小編就為大家分享一篇React Native 真機斷點調(diào)試+跨域資源加載出錯問題的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實現(xiàn)React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10React-redux?中useSelector使用源碼分析
在一個 action 被分發(fā)(dispatch) 后,useSelector() 默認對 select 函數(shù)的返回值進行引用比較 ===,并且僅在返回值改變時觸發(fā)重渲染,,這篇文章主要介紹了React-redux?中useSelector使用,需要的朋友可以參考下2023-10-10React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-08-08