ReactJS - createElement() 函数_ReactJS 菜鸟教程

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 - 我们传递的键，转换为字符串，如果不存在，则为 null。

例子

示例 1

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

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

function App() {
	 	// Data for our list
	 	const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
	 	
	 	// Create a list using createElement
	 	const list = createElement(
	 	 	 'ul',
	 	 	 null,
	 	 	 items.map((item, index) =>
	 	 	 	 	createElement('li', { key: index }, item)
	 	 	 )
	 	);
	 	
	 	// Render the list in the component
	 	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() {
	 	// Data for our cards
	 	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' },
	 	];
	 	
	 	// Create cards using createElement
	 	const cardElements = cards.map((card, index) =>
	 	 	 createElement('div', { key: index, className: 'card' },
	 	 	 	 	createElement('h2', null, card.title),
	 	 	 	 	createElement('p', null, card.content)
	 	 	 )
	 	);
	 	
	 	// Render the cards in the component
	 	return (
	 	 	 <div className="App">
	 	 	 	 	<h1>My Card App using createElement</h1>
	 	 	 	 	{cardElements}
	 	 	 </div>
	 	);
}

export default App;

输出

我的卡片应用 CreateElement

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

示例 3

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

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

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

function App() {
	 	// Data for our navigation items
	 	const navItems = [
	 	 	 { text: 'Home', link: '/' },
	 	 	 { text: 'About', link: '/about' },
	 	 	 { text: 'Services', link: '/services' },
	 	 	 { text: 'Contact', link: '/contact' },
	 	];
	 	
	 	// Create navigation links using createElement
	 	const navLinks = navItems.map((item, index) => (
	 	 		
	 	 	 // Adding a space after each navigation item
	 	 	 <>
	 	 	 	 	{createElement('a', { key: index, href: item.link, className: 'nav-link' }, item.text)}
	 	 	 	 		
	 	 	 </>
	 	));
	 	
	 	// Render the navigation menu in the component
	 	return (
	 	 	 <div className="App">
	 	 	 	 	<h1>Simple Navigation Menu</h1>
	 	 	 	 	<nav>
	 	 	 	 	 	 {createElement('ul', { className: 'nav-list' }, navLinks)}
	 	 	 	 	</nav>
	 	 	 </div>
	 	);
}

export default App;

输出

简单的导航菜单

这就是我们的导航菜单的外观。有“主页”、“关于”、“服务”和“联系”的链接。我们可以在我们的 Web 应用程序中使用此概念，通过提供的链接从一个页面导航到另一个页面。

总结

createElement 函数通过以特殊方式创建 React 元素来帮助我们制作网站的动态和交互式部分。这使得 React 应用程序更加灵活，能够做不同的事情。在这篇文章中，我们学习了如何使用 createElement，我们可以在其中放入哪些内容，以及为什么它对于使用 React 构建事物很重要。

<< ReactJS - createRef() 函数 ReactJS - UNSAFE_componentWillUpdate() 方法 >>