React中的函數式插槽，你明白了嗎？
作者：萌萌噠草頭將軍
雖然這種寫法看起來很奇怪，但是可以極大地提高組件的靈活性。或者說，這是一種超級加強的插槽寫法。因為，我們可以在組件外自定義渲染邏輯。
朋友們，好久不見，最近搬家，通勤時間從1小時變成三小時，花了一兩個月終于適應了，所以有空我又來更新文章了，今天分享 React 開發中遇到的具名插槽的函數用法
你可能見過下面的寫法。通常情況下，我們都會使用 children 屬性實現類似Vue的默認插槽功能。
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 屬性默認是 jsx 表達式，不是時，需要做額外的解析，否則會報錯
但是當 children 屬性是函數時，就會發生質的變化。
const Component = ({value, children}) => {
return <>{children(value)}</>
}
const renderChildren = (value) => {
return value.join('--')
}
function App() {
return (
<Component
value={["hello", 'world']}
children={renderChildren}
/>
)
}
圖片
顯示的指定 children 屬性時，相當于具名插槽，所以我們未必需要使用 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;
// 你的組件，假設已經被 Provider 包裹了
function Component() {
return (
<Consumer>{
({ name }) => <h1>name: { name }</h1>
}</Consumer>
);
}相似的還有一些第三方庫，比如 antd 的 <Form.List />。這里就不一一舉例子了。
雖然這種寫法看起來很奇怪，但是可以極大地提高組件的靈活性。或者說，這是一種超級加強的插槽寫法。因為，我們可以在組件外自定義渲染邏輯。
責任編輯：武曉燕
來源：
萌萌噠草頭將軍
