我使用 React 開發了幾個月，但沒有完全理解 React 元件模型的真正威力。有一天，我決定深入研究作曲，這就是我學到的。

React 元件和子元件

在 React 中，一個元件可以有一個、多個子元件，也可以沒有子元件。很好，但是等等 —— 什麼是「孩子」？我們用一個例子來解釋：

設定檔元件有兩個子元件：ProfileImage 和 ProfileDetails，而這兩個沒有子元件。

「在同時包含開始標籤和結束標籤的 JSX 表達式中，這些標籤之間的內容作為特殊 props 傳遞：props.children」 — React 文件

本質上，props.children是一個特殊的prop，自動傳遞給每個元件，可用於在呼叫元件時渲染開始和結束標記之間包含的內容。這些類型的元件被官方文件標識為“boxes”。

透過 JSX 語法識別組件

在 React 的 JSX 中，具有子元件的元件始終由開始標籤和結束標籤來識別。每個子項都必須放置在這兩個標籤之間，就像我們在上面看到的那樣。當元件沒有子元件時，您可以使用 或 呼叫它，但通常首選後一種語法。自閉合標籤的目的是使程式碼更短且更易於閱讀。

操作中的 props.children

假設我們要建立一個 ImageSlider 元件。我們的目標是像這樣呼叫元件：

可以看到，ImageSlider是由多個組成，可以透過props.children來存取和渲染。

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

感謝 props.children 我們可以將內容嵌套在元件中，就像嵌套常見的 HTML 元素一樣.

props.children 允許使用哪些類型的內容？

透過 props.children 傳遞給元件的內容可以包括

undefined、null、布林值、數字、字串、React 元素或任何這些類型的遞歸數組。它也可以是傳回這些類型之一的函數。

請注意，如 React 文件中所提到的， false、null、undefined 和 true 是有效的子項，但它們將被忽略並且不會渲染。如果想要渲染 false、true、null 或 undefined，則必須先將其轉換為字串：

  { String(undefined) }

為什麼 props.children 如此重要？

props.children 讓我們組合元件，從而組合我們的前端介面；利用 React 元件模型的真正力量。

「React 擁有強大的組合模型，我們建議使用組合而不是繼承以在元件之間重複使用程式碼。」 — React 文件

如官方文件所述，有時您可能需要填充元件中的多個「漏洞」。在這種情況下，定義多個自訂 props 可能是更好的方法，而不是使用 props.children；如下例所示：

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

React.Children

「React.Children 提供了處理 props.children 不透明資料結構的實用程式」 — React 文件

為什麼 props.children 是一個「不透明的資料結構」？

因為props.children 可以由一個、多個或沒有子元素組成，這意味著它的值可以是單一子節點，子節點數組，或 未定義分別。感謝 React.Children API，我們可以輕鬆處理 props.children，而無需考慮其每種可能的類型。值得慶幸的是，一切都會在後台為我們處理。

在撰寫本文時，React.Children 提供了五種不同的實用程式：

• 地圖

• forEach

• 數數

• 僅有的

• toArray

讓我們透過一個例子來看看如何使用 React.Children。假設我們想要將特殊的 CSS 類別 img-special-class 加入到 ImageSlider 元件的每個子元件中。這可以如下完成：

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map 讓我們迭代 props.children 並根據作為第二個參數傳遞的函數轉換每個元素。為了實現我們的目標，我們使用了 React.cloneElement。這是因為我們需要更改 className prop 的值，但是 props 在 React 中是不可變的，因此我們必須複製每個子級。

結論

掌握 props.children 對於成為優秀的 React 開發人員並開始充分利用 React 元件模型的潛力至關重要。 props.children 是 React 最有用的功能之一，因為它使我們能夠渲染子元件。正因為如此，每個開發者都應該知道如何正確使用它。

我希望這篇文章能幫助你掌握 React 中的組合。

貼文「A Complete Guide To props.children In React」首先出現在 Writech 上。