React 中的 CloneElement 方法

1. React 中的 cloneElement() 是什麼
2. React 中的 props.children 與 React.cloneElement()
3. React 中的 React.cloneElement() 語法
4. 在 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；你只能讀取它們的值。