ReactJS - 無 JSX 的 React

在本節中，我們將學習如何使用 createElement 建立 React 元件，而不是預設的 JSX。

什麼是 JSX？

JSX 是 JavaScript 的擴充套件，用於使用類似 HTML 的語法建立任意 HTML 元素。這將簡化 HTML 文件的建立，並易於理解文件。React 會在執行之前將 JSX 轉換為包含 React 的 createElement 函式呼叫的 JavaScript 物件。

它提高了應用程式的效能。此外，React 還允許使用純 createElement 函式建立 HTML 文件，而無需使用 JSX。這使開發人員能夠在 JSX 不適合的情況下直接建立 HTML 文件。

什麼是 createElement？

React.createElement 是 React 的核心 API，用於生成和渲染 HTML 文件。createElement 方法有三個引數：

• 元件名稱

• 作為物件的 props

• 元件的內部內容/子元素

這裡，子元素可以指另一個元件，該元件再次使用 createElement 建立。createElement 可以巢狀到任何級別。使用 React.createElement 建立元件的示例程式碼如下：

React.createElement('h1', null, 'Hello World')

這將渲染下面提到的 HTML 文件

<h1>Hello World</h1>

工作示例

讓我們建立一個名為 BookListUsingCreateElement 的元件來學習和理解 createElement 方法。

首先，使用 create-react-app 建立一個新應用程式

create-react-app myapp

然後，在 components 資料夾下新增一個新的元件 BookListUsingCreateElement。初始程式碼如下：

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
}
export default BookListUsingCreateElement

這裡，list 是元件中可用的書籍的初始集合。

現在，讓我們在 render 函式中使用 createElement 渲染書籍，如下所示。

render() {
   let content = React.createElement(
      'ol',
      null,
      this.state.list.map(
         (item) =>
         React.createElement('li', null, item)
      )
   )
   return content;
}

這裡，我們在兩個地方使用了 createElement。首先，我們使用它來建立元件的最頂層，即 ul HTML 元素。其次，我們多次使用 createElement 根據 list 中可用的書籍建立 li 元素。我們使用了 map 函式來迴圈遍歷列表中的所有書籍，並使用 React.createElement('li', null, item) 程式碼為每本書建立一個 li 元素。

最後，元件的完整程式碼如下

import React from 'react'
class BookListUsingCreateElement extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: ['C++ Programming', 'Java Programming', "JavaScript Programming"]
      };
   }
   render() {
      let content = React.createElement(
         'ol',
         null,
         this.state.list.map(
            (item) =>
            React.createElement('li', null, item)
         )
      )
      return content;
   }
}
export default BookListUsingCreateElement

讓我們透過 App.js 使用我們新建立的元件，如下所示：

import BookListUsingCreateElement from "./components/CreateElement/BookListUsingCreateElement";
function App() {
   return (
      <div>
         <BookListUsingCreateElement />
      </div>
   );
}
export default App;

現在，使用以下命令執行應用程式

npm start

應用程式將在預設瀏覽器中啟動並顯示以下結果