跳到主要内容

编写代码实现如何 React.createElement ?

参考答案:

React.createElement 是 React 中用于创建和返回一个元素对象的方法。这个方法接受三个参数:

  1. 类型(Type):一个字符串(表示 HTML 或 SVG 标签)或一个 React 组件(class 或 function)。
  2. 配置(Config):一个对象,其中包含任何应该传递给元素的属性(props)。
  3. 子元素(Children):React 元素的一个或多个子元素。

以下是一个简单的例子,演示如何使用 React.createElement 创建一个元素:

import React from 'react';

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 这将等价于使用 JSX 写的:
// const element = <h1 className="greeting">Hello, world!</h1>;

你也可以使用 React.createElement 来创建组件元素。例如,如果你有一个名为 Welcome 的组件,你可以这样创建它:

import React from 'react';
import Welcome from './Welcome';

const element = React.createElement(
  Welcome,
  {name: 'Sara'},
  null
);

// 这将等价于使用 JSX 写的:
// const element = <Welcome name="Sara" />;

注意,子元素参数可以是 nullundefinedbooleannumberstringReactElement,或这些类型的数组。在大多数情况下,子元素将是一个字符串或一个 ReactElement。如果传递了多个子元素,它们将被放在一个数组中。