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；你只能读取它们的值。