《react 實戰(zhàn)系列》children 透傳

問題

react 三層組件，也就是常說的爺孫組件，怎么通信？

方案一，props 直接傳

我稱之為暴力寫法（因為這種方式，其實不管嵌套多少層，都可以這樣寫，很暴力），直接看代碼。

function Top () {
  const [middleData] = useState(1);
  const [bottomData] = useState(2);
  
  return <Middle middleData={middleData} bottomData={bottomData}  />
}

function Middle ({ middleData, bottomData }) {
  return (
    <>
      {middleData}
      <Bottom bottomData={bottomData} />
    </>
  )
}

function Bottom ({ bottomData }) {
  return <>{bottomData}</>
}

Bottom 組件通過 Middle 組件中轉(zhuǎn)，成功拿到了 Top 組件的值。那這樣有什么問題呢？

這樣寫，如果 Top 組件需要傳遞其它數(shù)據(jù)給到 Bottom，就意味著 Middle 組件需要加字段。

方案一改進版

我們把所有需要從 Top 傳遞給 Bottom 的封裝為一個字段，比如叫 allBottomProps。

function Top () {
  const [middleData] = useState(1);
  const [bottomData] = useState(2);
  
  return <Middle middleData={middleData} allBottomProps={{ bottomData: bottomData }}  />
}

function Middle ({ middleData, allBottomProps }) {
  return (
    <>
      {middleData}
      <Bottom {...allBottomProps} />
    </>
  )
}

function Bottom ({ bottomData }) {
  return <>{bottomData}</>
}

這樣改進之后，Top 組件需要給 Bottom 傳遞其它數(shù)據(jù)時，就不需要去動 Middle 的代碼了。那這樣還有什么問題嗎？能不能把 Middle 這層抹平，不然即使封裝在一個字段，還是逃脫不了 Middle 的魔爪。我想直接測試 Middle 時，還得造一份 Bottom 組件的數(shù)據(jù)。

方案二，通過 children 透傳

先看代碼（類似于 vue 中的 slot），再來分析

function Top () {
  const [middleData] = useState(1);
  const [bottomData] = useState(2);
  
  return (
    <>
      <Middle middleData={middleData}>
        <Bottom bottomData={bottomData} />
      </Middle>
    </>
  )
}

function Middle ({ middleData, children }) {
  return (
    <>
      {middleData}
      {children}
    </>
  )
}

function Bottom ({ bottomData }) {
  return <>{bottomData}</>
}

利用 children 處理之后，優(yōu)點比較明顯:

• Middle 組件變得更加的獨立，跟 Bottom 不再耦合
• 直接在 Top 組件就可以進行數(shù)據(jù)的分發(fā)
• 直接在 Top 組件就可以看清楚組件的結(jié)構(gòu)，很清晰

小結(jié)

業(yè)務(wù)代碼，并且嵌套的層級不算深，可以試試 children 透傳。結(jié)構(gòu)簡單、清晰。

下期預告

十一將至，相信很多小伙伴都要騎上心愛的小摩托出去旅游。作為一個土生土長的重慶人，決定簡短寫一篇攻略（主要是吃），讓去重慶的小伙伴不踩雷，吃到正宗的美食。

像很多網(wǎng)紅點都是不推薦去吃的，商業(yè)化太嚴重，已經(jīng)變得不純粹了。具體下篇細說咯~~~