本文将探讨 React.createElement()，这可能是 React 中最重要的方法。许多开发人员对 JSX 感到满意，但不知道 JSX 是如何工作的。

JSX 是一种特殊的语法，它被编译成对 React.createElement() 的调用以及 React 中顶级 API 上可用的其他方法。

在 React 中使用 React.createElement() 创建组件

大多数 React 开发人员使用称为 JSX 的模板语言以声明方式调用组件并为应用程序设置结构。

React 框架背后的团队正确地认为 JSX 提供了一种在 React 中编写应用程序的简单方法。

通常，React 开发人员使用 JSX 来指示元素的外观、设置事件和自定义内容。但是，有时需要直接调用 React.createElement()。

React 中的 React.createElement() 方法参数

该方法接受三个参数：元素类型、props 和 children。

第一个参数可以是一个常规 HTML 元素的名称，作为字符串（例如，div）或自定义组件（例如，Contact）。

第二个参数表示组件的 props，它可以是具有键值对的单个对象或类似对象的数组。

最后一个参数代表 children，它可以是你希望从父组件传递给子组件的任何值。

让我们看看如何在实践中使用 React.createElement() 方法。

export default function App() {
  return (
    <div className="App">
      {React.createElement("h1", null, "Some text,", " more words")}
    </div>
  );
}

在这个例子中，我们创建了一个简单的标题元素 h1，我们从 HTML 中知道它。我们将 null 作为 props 传递，因为我们不需要 props。

最后两个参数都是字符串。如果你查看 CodeSandbox，你会注意到这些字符串自动成为我们的 h1 元素之间的内容。

你可以通过阅读子组件中的 props.children 来访问这些参数。

火焰兔

海报 链接

本文将探讨 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；你只能读取它们的值。

火焰兔

海报 链接