createElement

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

• 參考
  • createElement(type, props, ...children)
• 用法
  • 在不使用 JSX 的情況下建立元素

參考

createElement(type, props, ...children)

呼叫 createElement 以使用給定的 type、props 和 children 建立 React 元素。

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

請參閱以下更多範例。

參數

• type：type 參數必須是有效的 React 元件類型。例如，它可以是標籤名稱字串（例如 'div' 或 'span'），或是 React 元件（函式、類別或特殊元件，例如 Fragment）。

• props：props 參數必須是物件或 null。如果您傳遞 null，它將被視為空物件。React 將建立一個 props 與您傳遞的 props 相符的元素。請注意，來自 props 物件的 ref 和 key 是特殊的，在傳回的 element 上*不會*以 element.props.ref 和 element.props.key 的形式提供。它們將以 element.ref 和 element.key 的形式提供。

• 選用 ...children：零個或多個子節點。它們可以是任何 React 節點，包括 React 元素、字串、數字、入口、空節點（null、undefined、true 和 false）以及 React 節點的陣列。

回傳

createElement 會回傳一個具有幾個屬性的 React 元素物件。

• type：您傳遞的 type。
• props：您傳遞的 props，但不包含 ref 和 key。
• ref：您傳遞的 ref。如果缺少，則為 null。
• key：您傳遞的 key，強制轉換為字串。如果缺少，則為 null。

通常，您會從您的組件回傳元素，或使其成為另一個元素的子元素。雖然您可以讀取元素的屬性，但在建立元素後，最好將每個元素視為不透明，並且只渲染它。

注意事項

• 您必須將 React 元素及其屬性視為不可變的 (immutable)，並且在建立後絕不更改其內容。在開發過程中，React 會凍結 (freeze) 回傳的元素及其 props 屬性（淺層凍結）來強制執行此操作。

• 當您使用 JSX 時，您必須以大寫字母開頭標籤來渲染您自己的自定義組件。換句話說，<Something /> 等同於 createElement(Something)，但 <something />（小寫）等同於 createElement('something')（請注意它是一個字串，因此它將被視為內建的 HTML 標籤）。

• 只有在所有子元素都是靜態已知的情況下，才應該將子元素作為多個參數傳遞給 createElement，例如 createElement('h1', {}, child1, child2, child3)。如果您的子元素是動態的，請將整個陣列作為第三個參數傳遞：createElement('ul', {}, listItems)。這確保 React 會針對任何動態列表警告您缺少 key。對於靜態列表，這不是必要的，因為它們永遠不會重新排序。

用法

不使用 JSX 建立元素

如果您不喜歡JSX 或無法在您的專案中使用它，您可以使用 createElement 作為替代方案。

要建立不使用 JSX 的元素，請使用一些 類型、屬性 和 子元素 來呼叫 createElement。

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

子元素 是選用的，您可以傳遞任意多個子元素（上面的範例有三個子元素）。這段程式碼將會顯示一個帶有問候語的 <h1> 標題。為了比較，以下是使用 JSX 重寫的相同範例。

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

要渲染您自己的 React 組件，請傳遞一個像 Greeting 的函式作為 類型，而不是像 'h1' 的字串。

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

使用 JSX，它看起來像這樣。

export default function App() {
  return <Greeting name="Taylor" />;
}

這是一個使用 createElement 撰寫的完整範例。

以下是使用 JSX 撰寫的相同範例。

兩種編碼風格都沒問題，因此您可以選擇您喜歡的風格用於您的專案。與 createElement 相比，使用 JSX 的主要好處是它很容易看出哪個結束標籤對應於哪個開始標籤。

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}