createElement

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

• 参考
  • createElement(type, props, ...children)
• 用法
  • 不使用 JSX 创建元素

参考

🌐 Reference

createElement(type, props, ...children)

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

🌐 Call createElement to create a React element with the given type, props, and children.

import { createElement } from 'react';

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

查看更多示例。

参数

🌐 Parameters

• type：type 参数必须是一个有效的 React 组件类型。例如，它可以是一个标签名称字符串（例如 'div' 或 'span'），或者是一个 React 组件（一个函数、一个类，或者一个特殊组件，例如 Fragment）。
• props：props 参数必须是一个对象或 null。如果你传入 null，它将被视为一个空对象。React 会创建一个元素，其 props 与你传入的 props 相匹配。注意，props 对象中的 ref 和 key 是特殊的，并且 不会 在返回的 element 上作为 element.props.ref 和 element.props.key 可用。它们将以 element.ref 和 element.key 的形式可用。
• 可选 ...children：零个或多个子节点。它们可以是任何 React 节点，包括 React 元素、字符串、数字、门户、空节点（null、undefined、true 和 false）以及 React 节点数组。

返回

🌐 Returns

createElement 返回一个带有几个属性的 React 元素对象：

• type：你传递的 type。
• props：你传递的 props 除了 ref 和 key 之外。
• ref：你传递的 ref。如果缺失，则为 null。
• key：你传入的 key 会被强制转换为字符串。如果缺失，则使用 null。

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

🌐 Usually, you’ll return the element from your component or make it a child of another element. Although you may read the element’s properties, it’s best to treat every element as opaque after it’s created, and only render it.

注意事项

🌐 Caveats

• 你必须将 React 元素及其 props 视为不可变，并且在创建后绝不更改其内容。在开发环境中，React 会冻结返回的元素及其 props 属性（浅冻结）以强制执行这一点。
• 当你使用JSX时，你必须用大写字母开头标记，才能渲染你自定义的组件。 换句话说，<Something /> 等同于 createElement(Something)，但 <something />（小写）等同于 createElement('something')（注意它是一个字符串，所以会被当作内置HTML标签处理）。
• 你应该仅**在所有子元素都是静态已知的情况下，将它们作为多个参数传递给 createElement，**就像 createElement('h1', {}, child1, child2, child3) 那样。如果你的子元素是动态的，请将整个数组作为第三个参数传递：createElement('ul', {}, listItems)。这样可以确保 React 会警告你任何动态列表中缺失的 key。对于静态列表则不需要这样做，因为它们从不重新排序。

用法

🌐 Usage

不使用 JSX 创建元素

🌐 Creating an element without JSX

如果你不喜欢 JSX 或者不能在你的项目中使用它，你可以使用 createElement 作为替代。

🌐 If you don’t like JSX or can’t use it in your project, you can use createElement as an alternative.

要在没有 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 这样的函数作为 type ，而不是像 'h1' 这样的字符串：

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

使用 JSX，它看起来会像这样：

🌐 With JSX, it would look like this:

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

下面是一个使用 createElement 编写的完整示例：

🌐 Here is a complete example written with createElement:

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

🌐 And here is the same example written using JSX:

两种编码风格都可以，所以你可以在项目中使用你更喜欢的那种。与 createElement 相比，使用 JSX 的主要好处是很容易看出哪个闭合标签对应哪个开标签。

🌐 Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to createElement is that it’s easy to see which closing tag corresponds to which opening tag.

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