createElement

const element = createElement(type, props, ...children)

• 参考
  • createElement(type, props, ...children)
• 用法
  • 在不使用 JSX 的情况下创建一个元素

参考

createElement(type, props, ...children)

调用 createElement 创建一个具有给定 type、props 和 children 的 React 元素。

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

请参阅下面的更多示例。

参数

• type：type 参数必须是一个有效的 React 组件类型。例如，它可以是一个标签名字符串（例如 'div' 或 'span'），或者是一个 React 组件（一个函数、一个类，或者一个特殊的组件，例如 Fragment）。

• props：props 参数必须是一个对象或 null。如果您传递 null，它将被视为与空对象相同。React 将创建一个属性与您传递的 props 匹配的元素。请注意，来自您的 props 对象的 ref 和 key 是特殊的，并且在返回的 element 上将*不会*作为 element.props.ref 和 element.props.key 可用。它们将作为 element.ref 和 element.key 可用。

• 可选 ...children：零个或多个子节点。它们可以是任何 React 节点，包括 React 元素、字符串、数字、入口、空节点（null、undefined、true 和 false）以及 React 节点数组。

返回值

createElement 会返回一个 React 元素对象，该对象具有一些属性

• type：您传递的 type。
• props：您传递的 props，但 ref 和 key 除外。如果 type 是具有旧版 type.defaultProps 的组件，则任何缺失或未定义的 props 都将从 type.defaultProps 获取值。
• ref：您传递的 ref。如果缺失，则为 null。
• key：您传递的 key，强制转换为字符串。如果缺失，则为 null。

通常，您将从组件返回元素或将其设为另一个元素的子元素。尽管您可以读取元素的属性，但最好在创建元素后将其视为不透明的，并且只渲染它。

注意事项

• 您必须将 React 元素及其属性视为不可变的，并且在创建后永远不要更改其内容。在开发中，React 将冻结返回的元素及其 props 属性（浅层冻结），以强制执行此操作。

• 使用 JSX 时，必须以大写字母开头标记才能渲染您自己的自定义组件。 换句话说，<Something /> 等效于 createElement(Something)，但 <something />（小写）等效于 createElement('something')（请注意，它是一个字符串，因此它将被视为内置 HTML 标记）。

• 只有当所有子元素都是静态已知的情况下，才应该将子元素作为多个参数传递给 createElement，例如 createElement('h1', {}, child1, child2, child3)。如果您的子元素是动态的，请将整个数组作为第三个参数传递：createElement('ul', {}, listItems)。这确保了 React 会针对任何动态列表的缺失 key 发出警告。对于静态列表，这不是必需的，因为它们从不重新排序。

用法

在不使用 JSX 的情况下创建元素

如果您不喜欢JSX 或者无法在项目中使用它，则可以使用 createElement 作为替代方法。

要在不使用 JSX 的情况下创建元素，请使用一些 类型、属性 和 子元素 调用 createElement

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

子元素 是可选的，您可以根据需要传递任意数量的子元素（上面的示例有三个子元素）。此代码将显示一个带有问候语的 <h1> 标题。为了进行比较，下面是用 JSX 重写的相同示例

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

要渲染您自己的 React 组件，请传递一个函数（如 Greeting）作为 类型，而不是像 'h1' 这样的字符串

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

使用 JSX，它将如下所示

export default function App() {
  return <Greeting name="Taylor" />;
}

下面是用 createElement 编写的完整示例

下面是使用 JSX 编写的相同示例

两种编码风格都很好，因此您可以根据项目的需要选择其中一种。与 createElement 相比，使用 JSX 的主要好处是，它可以轻松地查看哪个结束标记对应于哪个开始标记。

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}