移動端

React中的函數(shù)式插槽，你明白了嗎？

作者：萌萌噠草頭將軍 2023-11-06 07:37:01

雖然這種寫法看起來很奇怪，但是可以極大地提高組件的靈活性。或者說，這是一種超級加強的插槽寫法。因為，我們可以在組件外自定義渲染邏輯。

朋友們，好久不見，最近搬家，通勤時間從1小時變成三小時，花了一兩個月終于適應(yīng)了，所以有空我又來更新文章了，今天分享 React 開發(fā)中遇到的具名插槽的函數(shù)用法

你可能見過下面的寫法。通常情況下，我們都會使用 children 屬性實現(xiàn)類似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 屬性是函數(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 屬性時，相當于具名插槽，所以我們未必需要使用 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 />。這里就不一一舉例子了。

雖然這種寫法看起來很奇怪，但是可以極大地提高組件的靈活性。或者說，這是一種超級加強的插槽寫法。因為，我們可以在組件外自定義渲染邏輯。

責任編輯：武曉燕來源：萌萌噠草頭將軍

函數(shù)式插槽 React