React中的函數(shù)式插槽詳解
朋友們，好久不見(jiàn)，最近搬家，通勤時(shí)間從1小時(shí)變成三小時(shí)，花了一兩個(gè)月終于適應(yīng)了，所以有空我又來(lái)更新文章了，今天分享 React 開(kāi)發(fā)中遇到的具名插槽的函數(shù)用法
你可能見(jiàn)過(guò)下面的寫(xiě)法。通常情況下，我們都會(huì)使用 children 屬性實(shí)現(xiàn)類(lèi)似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 屬性，那么可以這么寫(xiě)：
function App() {
return (
<Component value={["hello", 'world']}>
{(value) => {
return value.join('--')
}}
</Component>
)
}
這種寫(xiě)法似乎有點(diǎn)熟悉，沒(méi)錯(cuò)，React 官方也這么干過(guò)，你來(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 />。這里就不一一舉例子了。
雖然這種寫(xiě)法看起來(lái)很奇怪，但是可以極大地提高組件的靈活性?；蛘哒f(shuō)，這是一種超級(jí)加強(qiáng)的插槽寫(xiě)法。因?yàn)?，我們可以在組件外自定義渲染邏輯。
到此這篇關(guān)于React中的函數(shù)式插槽詳解的文章就介紹到這了,更多相關(guān)React函數(shù)式插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼
我們?cè)陂_(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)出現(xiàn)下拉框數(shù)據(jù)很多得情況，本文主要介紹了react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
本文主要介紹了淺談React底層實(shí)現(xiàn)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了React的組件API，及組件API的用法詳解，文中有詳細(xì)的代碼示例，對(duì)學(xué)習(xí)或工作有一定的參考價(jià)值，感興趣的同學(xué)可以閱讀本文2023-04-04
React獲取Java后臺(tái)文件流并下載Excel文件流程解析
這篇文章主要介紹了React獲取Java后臺(tái)文件流下載Excel文件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對(duì)我們的學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以了解一下2023-03-03
react中的key屬性,它是一個(gè)特殊的屬性,它是出現(xiàn)不是給開(kāi)發(fā)者用的,而是給React自己使用,有了key屬性后,就可以與組件建立了一種對(duì)應(yīng)關(guān)系,本文主要介紹了React中Key屬性作用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue()，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
React狀態(tài)更新的優(yōu)先級(jí)機(jī)制源碼解析
這篇文章主要為大家介紹了React狀態(tài)更新的優(yōu)先級(jí)機(jī)制源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React虛擬渲染實(shí)現(xiàn)50個(gè)或者一百個(gè)圖表渲染
這篇文章主要為大家介紹了React虛擬渲染實(shí)現(xiàn)50個(gè)或者100個(gè)圖表渲染的實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
react-json-editor-ajrm解析錯(cuò)誤與解決方案
由于歷史原因,項(xiàng)目中 JSON 編輯器使用的是 react-json-editor-ajrm,近期遇到一個(gè)嚴(yán)重的展示錯(cuò)誤,傳入編輯器的數(shù)據(jù)與展示的不一致,這是產(chǎn)品和用戶不可接受的,本文給大家介紹了react-json-editor-ajrm解析錯(cuò)誤與解決方案,需要的朋友可以參考下2024-06-06