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 構建內容很重要。