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