React 中的 CloneElement 方法
-
React 中的
cloneElement()
是什麼 -
React 中的
props.children
與React.cloneElement()
-
React 中的
React.cloneElement()
語法 -
在 React 中何時使用
children
Prop
本文將探討 props.children
如何與 React.cloneElement()
相關聯,並解釋它們的異同。
React 中的 cloneElement()
是什麼
在 React 中,我們使用 props
手動將資料從父元件傳遞給子元件。
乍一看,props
似乎很簡單,但如果你檢視 props
物件,你會發現它比看起來更復雜。
例如,你會注意到 children
屬性,即使你可能沒有明確設定 children
屬性。
cloneElement()
是構成核心 React
庫的一種方法。顧名思義,React.cloneElement()
用於克隆 React 元素,通常構建在原始元件之上。
例如,它允許你新增 props
並修改元件的 props.children
值。
React 中的 props.children
與 React.cloneElement()
許多 React 開發人員交替使用這兩者,但實際上,props.children
和 React.cloneElement()
可用於不同的目的。
props.children
用於在呼叫子元件時訪問在子元件的開始標籤和結束標籤之間傳遞的所有內容。唯一的缺點是你不能以任何方式修改 props.children
。
在 React 中,props 是不可變的,並且該規則還包括 children
屬性。
這就是 React.cloneElement()
發揮作用的時候。你可以在父元件中使用它來新增某些 props
、修改子元件或以任何其他方式擴充套件子元件的功能,例如新增事件處理程式或 ref
屬性以促進對 DOM 的操作。
React 中的 React.cloneElement()
語法
在你的專案中使用 React.cloneElement()
之前,你應該瞭解它的語法:它需要什麼樣的引數、它們的結構以及它們代表什麼。
React.cloneElement()
方法的第一個引數是你要克隆(或在其之上構建)的元素或元件。
該方法自動保留元件的所有原始 props
,但你可以新增更多 props
作為該方法的第二個引數,該方法應該是一個陣列。
該方法的第三個引數用於指定克隆物件的 children
屬性。與常規的 props
不同,原始元件的 children
不會保留在副本中。
話雖如此,讓我們看看實際的例子。
export default function App() {
return (
<div className="App">
<Child text={"Hello, World"}>Goodbye</Child>
{React.cloneElement(<Child></Child>, { text: "Hello, Universe" }, "Ciao")}
</div>
);
}
function Child(props) {
return (
<div>
<h1>{props.text}</h1>
<h1>{props.children}</h1>
</div>
);
}
在這個例子中,我們簡單地演示了 React.cloneElement()
方法的實用性。
如果你檢視實時 CodeSandbox 演示,你會看到父 App
元件中有兩個 <Child>
元件,一個原始元件和一個副本。
根據我們之前描述的語法,第一個引數是我們試圖複製的元件,<Child>
。第二個引數是一個具有鍵值對的物件,該鍵值對錶示 prop
屬性及其值。
在這種情況下,原始元件的 props 被保留,但我們正在覆蓋 text
的值。最後一個引數是一個字串,它將把 props.children
值放在子元件中。
在 React 中何時使用 children
Prop
你通常可以使用 props.children
來訪問在 JSX 中子元件的開始標籤和結束標籤之間傳遞的值。
如果子元件的內容是動態生成的,例如訊息框,則 children
屬性特別有用。
但是,要記住的一個重要細節是 props.children
值只是值的描述符。你沒有訪問這些值,只有在你訪問它時它們的表示。
因此,你不能更改 props.children
或任何其他 props;你只能讀取它們的值。
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