React 中的 props 和 children

本文將探討 props.children 是什麼以及為什麼它對自定義元件有用。

React 中的 props.children 是什麼

與任何其他基於元件的庫一樣，React 促進了程式碼的可重用性。首先，這是通過重用元件來實現的，但還有更多。

由於框架遵循宣告式方法，因此很容易包含元件並巢狀它們。

React 提供了構建通用元件並使用組合模型自定義它們所需的工具和框架。

要使用組合模型自定義元件，你必須訪問 props 物件的 children 屬性。預設情況下，每個元件都具有此屬性。

簡單來說，子元件的 props.children 可用於在呼叫該子元件時訪問開始和結束標記之間的巢狀值。讓我們看一個簡單的例子。

export default function App() {
  return (
    <div className="App">
      <Child>
        <h1>Hello, world</h1>
      </Child>
    </div>
  );
}
function Child(props) {
  return <div>{props.children}</div>;
}

在這個例子中，看起來我們直接在 App 元件中顯示內容，但我們在 <Child> 元件的開始標籤和結束標籤之間傳遞內容作為 props。稍後我們在 Child 元件中引用 <h1> 元素。

你可以在 CodeSandbox 上檢視實時程式碼示例。

請注意，你必須呼叫帶有開始和結束標籤的元件才能使 props.children 功能正常工作。

在某些情況下，React 開發人員會編寫自閉合標籤：<Child />。這與需要開啟和關閉標籤才能工作的 props.children 不相容。

在 React JSX 中傳遞 props.children

當你需要動態生成內容並將其傳遞給子元件時，React 的此功能特別有用，子元件可能只是一個樣式化的容器。這個用例的一個很好的例子是任何信使應用程式中的訊息框。

在示例中，我們通過 props 從父元件向子元件傳遞了一個 <h1> 元素。你想要傳遞給子元件的內容量不受限制。

你在子元件的開啟和關閉 JSX 標記之間放置的任何內容都可以通過 props.children 在子元件中呈現。

如果你有很多內容要作為 children 傳遞，你可能需要將它們傳遞到子元件中的多個孔中。React 讓開發人員可以自由地在子元件上建立自定義 prop 屬性。

讓我們看一個例子。

export default function App() {
  return (
    <div className="App">
      <Child
      greeting={<h1>Hello, world</h1>}
      goodbye={<h1>Goodbye, world</h1>}
      >
      </Child>
    </div>
  );
}
function Child(props) {
  return <div>
           <div className="top">{props.greeting}</div>
           <div className="bottom">{props.goodbye}</div>
         </div>;
}

在這種情況下，我們不是在開始標籤和結束標籤之間傳遞 <h1> 元素，而是建立自定義屬性 greeting 和 goodbye 並將元素作為 props 傳遞。

在 Child 元件中，我們有兩個單獨的 <div> 元素，它們顯示來自每個屬性的值。

這個例子的關鍵點是你可以傳遞 HTML 元素，如 <h1> 作為 props，以及自定義元件。例如，Vue 有一個類似的概念，叫做 slots。

然而，在 React 中，你並不侷限於可以作為 props 傳遞的值。

在 React 中使用 children 屬性傳遞孩子

在 React 中傳遞 children 值的最常見方法是將它們放在元件的開始標籤和結束標籤之間。或者，你可以在元件上使用 children 值並設定其值。

在 React 中使用 React.createElement() 傳遞子節點

JSX 允許我們以宣告方式定義和呼叫 React 元件，但所有 JSX 程式碼最終都編譯為 React.createElement() 呼叫。

如果你不使用 JSX 來開發你的 web 應用，你可以直接使用 React.createElement() 方法。前兩個引數是 type 和 props。

之後，任何後續引數都將作為子元素傳遞給建立的元素，並且可以通過訪問 props.children 值來引用。