ReactJS - createElement() 函数

更新于 2025/3/23 6:52:17

createElement 是一个关键的 React 函数，它允许开发人员在不使用 JSX 的情况下创建元素。它是创建用户界面的绝佳工具，因为它提供了一种设计 React 元素的系统方法。

元素是 React 中用户界面的构建块，表示网页上的 UI 组件。虽然 JSX 是创建这些元素的常用语法，但 createElement 提供了一种不同的方法。

语法

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

参数

type − 这是我们 React 组件的类型。它可以是 div 或 span 等标签名称，也可以是 React 组件。
props − 这些是我们元素的属性。它必须是一个对象或 null。Ref 和 key 是特殊的，不能作为 element.props.ref 和 element.props.key 使用。
…children − 我们可以有零个或多个子节点。它们可以是任何 React 节点，如元素、字符串、数字、门户、空节点和节点数组。

返回值

该函数返回具有以下属性的 React 元素对象 −

type − 我们指定的类型。
props −我们传递的没有 ref 和 key 的属性。
ref − 我们传递的 ref，如果不存在则为 null。
key − 我们传递的 key，转换为字符串，如果不存在则为 null。

示例

示例 1

让我们使用 createElement 创建一个小型 React 应用来显示一个简单的项目列表。使用 Create React App 创建一个新 React 应用。现在我们可以用以下代码替换 src/App.js 的内容 −

import React, { createElement } from 'react';
import './App.css';

function App() {
   // 我们的列表的数据
   const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
   
   // 使用 createElement 创建列表
   const list = createElement(
      'ul',
      null,
      items.map((item, index) =>
         createElement('li', { key: index }, item)
      )
   );
   
   // 在组件中渲染列表
   return (
      <div className="App">
         <h1>Simple List App</h1>
         {list}
      </div>
   );
}

export default App;

输出

运行应用程序后，我们将能够看到一个简单的 React 应用程序显示项目列表。

此示例展示了如何使用 createElement 动态创建列表。列表中的每个项目都是使用 createElement 用适当的标签和属性生成的。虽然这是一个简单的例子，但它展示了我们如何使用 createElement 以编程方式构建元素。

示例 2

让我们使用 createElement 方法创建另一个 React 应用程序。这次，我们将创建一个简单的卡片组件。应用程序的代码如下 −

import React, { createElement } from 'react';
import './App.css';

function App() {
   // 我们的卡片数据
   const cards = [
      { title: 'Card 1', content: 'Content for Card 1' },
      { title: 'Card 2', content: 'Content for Card 2' },
      { title: 'Card 3', content: 'Content for Card 3' },
      { title: 'Card 4', content: 'Content for Card 4' },
   ];
   
   // 使用 createElement 创建卡片
   const cardElements = cards.map((card, index) =>
      createElement('div', { key: index, className: 'card' },
         createElement('h2', null, card.title),
         createElement('p', null, card.content)
      )
   );
   
   // 在组件中渲染卡片
   return (
      <div className="App">
         <h1>My Card App using createElement</h1>
         {cardElements}
      </div>
   );
}

export default App;

输出

在此示例中，我们创建了一个带有标题和一些内容的基本卡片组件。要为每个卡片构建 div 元素以及用于标题和内容的嵌套 h2 和 p 元素，请使用 createElement 函数。然后，该组件将呈现 cardElements 数组。

示例 3

让我们使用 createElement 方法再创建一个 React 应用。在此应用中，我们将创建一个简单的导航菜单。该应用的代码如下 −

因此，我们将使用 createElement 方法创建带有链接的菜单。navItems 数组包含每个导航项的带有文本和链接属性的对象。使用 createElement 创建 navLinks 数组以生成具有适当属性的元素。

import React, { createElement } from 'react';
import './App.css';

function App() {
   // 我们的导航项的数据
   const navItems = [
      { text: 'Home', link: '/' },
      { text: 'About', link: '/about' },
      { text: 'Services', link: '/services' },
      { text: 'Contact', link: '/contact' },
   ];
   
   // 使用 createElement 创建导航链接
   const navLinks = navItems.map((item, index) => (
      
      // 在每个导航项后添加一个空格
      <>
         {createElement('a', { key: index, href: item.link, className: 'nav-link' }, item.text)}
          
      </>
   ));
   
   // 在组件中渲染导航菜单
   return (
      <div className="App">
         <h1>Simple Navigation Menu</h1>
         <nav>
            {createElement('ul', { className: 'nav-list' }, navLinks)}
         </nav>
      </div>
   );
}

export default App;