React 中的 CreateElement 方法

1. 在 React 中使用 React.createElement() 创建组件
2. React 中的 React.createElement() 方法参数

本文将探讨 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 来访问这些参数。