ReactJS - createElement() 函数

---

---

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() {
   // 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 元素。然后组件渲染 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 构建内容很重要。