React 中的 props 和 children

Irakli Tchigladze 2023年1月30日
  1. React 中的 props.children 是什麼
  2. 在 React JSX 中傳遞 props.children
  3. 在 React 中使用 children 屬性傳遞孩子
  4. 在 React 中使用 React.createElement() 傳遞子節點
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> 元素,而是建立自定義屬性 greetinggoodbye 並將元素作為 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() 方法。前兩個引數是 typeprops

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Element