React 中的 props 和 children
-
React 中的
props.children
是什麼 -
在 React JSX 中傳遞
props.children
-
在 React 中使用
children
屬性傳遞孩子 -
在 React 中使用
React.createElement()
傳遞子節點
本文將探討 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
值來引用。
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