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 元素、字符串、数字、portals、空节点（null、undefined、true 和 false）以及 React 节点数组。

返回

createElement 返回一个包含一些属性的 React 元素对象。

• type：你传入的 type。
• props：你传入的 props，但不包括 ref 和 key。
• ref：你传入的 ref。如果缺失，则为 null。
• key：你传入的 key，强制转换为字符串。如果缺失，则为 null。

通常，你将从组件中返回元素或将其作为另一个元素的子元素。虽然你可以读取元素的属性，但在创建元素后最好将其视为不透明的，只进行渲染。

注意事项

• 你必须将 React 元素及其 props 视为不可变的，并且在创建后永远不要更改其内容。在开发过程中，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 创建元素，请使用一些 type、props 和 children 调用 createElement。

import { createElement } from 'react';

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

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

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

要渲染你自己的 React 组件，请将类似于 Greeting 的函数作为 type 传递，而不是像 '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,
}