React中的函數(shù)式插槽詳解
朋友們，好久不見，最近搬家，通勤時(shí)間從1小時(shí)變成三小時(shí)，花了一兩個(gè)月終于適應(yīng)了，所以有空我又來(lái)更新文章了，今天分享 React 開發(fā)中遇到的具名插槽的函數(shù)用法
你可能見過下面的寫法。通常情況下，我們都會(huì)使用 children 屬性實(shí)現(xiàn)類似Vue的默認(rèn)插槽功能。
const Component = ({ value, children }) => {
return <>
{value}
{children}
</>
}
function App() {
return <Component value="hello">world</Component>
}
上面使用了隱藏的 children 屬性，我們可以顯示的指定它
function App() {
return <Component value="hello" children="world" />
}
children 屬性默認(rèn)是 jsx 表達(dá)式，不是時(shí)，需要做額外的解析，否則會(huì)報(bào)錯(cuò)
但是當(dāng) children 屬性是函數(shù)時(shí)，就會(huì)發(fā)生質(zhì)的變化。
const Component = ({value, children}) => {
return <>{children(value)}</>
}
const renderChildren = (value) => {
return value.join('--')
}
function App() {
return (
<Component
value={["hello", 'world']}
children={renderChildren}
/>
)
}
顯示的指定 children 屬性時(shí)，相當(dāng)于具名插槽，所以我們未必需要使用 children 字段，或許你可以使用reader更合適
如果你不喜歡顯示的聲明 children 屬性，那么可以這么寫：
function App() {
return (
<Component value={["hello", 'world']}>
{(value) => {
return value.join('--')
}}
</Component>
)
}
這種寫法似乎有點(diǎn)熟悉，沒錯(cuò)，React 官方也這么干過，你來(lái)看看這個(gè)例子。
const Context = createContext({name: '萌萌噠草頭將軍'});
export const Provider = Context.Provider;
export const Consumer = Context.Consumer;
// 你的組件，假設(shè)已經(jīng)被 Provider 包裹了
function Component() {
return (
<Consumer>{
({ name }) => <h1>name: { name }</h1>
}</Consumer>
);
}
相似的還有一些第三方庫(kù)，比如 antd 的 <Form.List />。這里就不一一舉例子了。
雖然這種寫法看起來(lái)很奇怪，但是可以極大地提高組件的靈活性。或者說(shuō)，這是一種超級(jí)加強(qiáng)的插槽寫法。因?yàn)?，我們可以在組件外自定義渲染邏輯。
到此這篇關(guān)于React中的函數(shù)式插槽詳解的文章就介紹到這了,更多相關(guān)React函數(shù)式插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Mobx是一個(gè)前端“狀態(tài)管理框架”，狀態(tài)管理就是將分布在各個(gè)組件、各個(gè)模塊中的狀態(tài)的變化，按照一定的規(guī)則，進(jìn)行統(tǒng)一的管理，這篇文章主要介紹了React中如何使用Mobx,需要的朋友可以參考下2023-02-02
本文詳細(xì)介紹了React中的雙緩存Fiber樹機(jī)制,包括概念、核心流程、優(yōu)勢(shì)以及面試中的常見問題和標(biāo)準(zhǔn)回答,通過"通俗+專業(yè)"的方式,幫助面試者全面理解React的性能優(yōu)化體系,掌握雙緩存Fiber樹的關(guān)鍵點(diǎn),感興趣的朋友跟隨小編一起看看吧2026-03-03
使用?React?Hooks?重構(gòu)類組件的示例詳解
這篇文章主要介紹了如何使用?React?Hooks?重構(gòu)類組件,本文就來(lái)通過一些常見示例看看如何使用 React Hooks 來(lái)重構(gòu)類組件，需要的朋友可以參考下2022-07-07
一文詳解如何使用React監(jiān)聽網(wǎng)絡(luò)狀態(tài)
在現(xiàn)代Web應(yīng)用程序中，網(wǎng)絡(luò)連接是至關(guān)重要的，通過監(jiān)聽網(wǎng)絡(luò)狀態(tài)，我們可以為用戶提供更好的體驗(yàn)，例如在斷網(wǎng)時(shí)顯示有關(guān)網(wǎng)絡(luò)狀態(tài)的信息，本文將介紹如何使用React監(jiān)聽網(wǎng)絡(luò)狀態(tài)的變化，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
解決React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
ReactNative實(shí)現(xiàn)圖片上傳功能的示例代碼
本篇文章主要介紹了ReactNative實(shí)現(xiàn)圖片上傳功能的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07
如何不使用eject修改create-react-app的配置
許多剛開始接觸create-react-app框架的同學(xué)，不免都會(huì)有個(gè)疑問：如何在不執(zhí)行eject操作的同時(shí)，修改create-react-app的配置。2021-04-04
react結(jié)合typescript?封裝組件實(shí)例詳解
這篇文章主要為大家介紹了react結(jié)合typescript?封裝組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04