React 中的 CreateElement 方法

1. 在 React 中使用 React.createElement() 建立元件
2. React 中的 React.createElement() 方法引數

本文將探討 React.createElement()，這可能是 React 中最重要的方法。許多開發人員對 JSX 感到滿意，但不知道 JSX 是如何工作的。

JSX 是一種特殊的語法，它被編譯成對 React.createElement() 的呼叫以及 React 中頂級 API 上可用的其他方法。

在 React 中使用 React.createElement() 建立元件

大多數 React 開發人員使用稱為 JSX 的模板語言以宣告方式呼叫元件併為應用程式設定結構。

React 框架背後的團隊正確地認為 JSX 提供了一種在 React 中編寫應用程式的簡單方法。

通常，React 開發人員使用 JSX 來指示元素的外觀、設定事件和自定義內容。但是，有時需要直接呼叫 React.createElement()。

React 中的 React.createElement() 方法引數

該方法接受三個引數：元素型別、props 和 children。

第一個引數可以是一個常規 HTML 元素的名稱，作為字串（例如，div）或自定義元件（例如，Contact）。

第二個參數列示元件的 props，它可以是具有鍵值對的單個物件或類似物件的陣列。

最後一個引數代表 children，它可以是你希望從父元件傳遞給子元件的任何值。

讓我們看看如何在實踐中使用 React.createElement() 方法。

export default function App() {
  return (
    <div className="App">
      {React.createElement("h1", null, "Some text,", " more words")}
    </div>
  );
}

在這個例子中，我們建立了一個簡單的標題元素 h1，我們從 HTML 中知道它。我們將 null 作為 props 傳遞，因為我們不需要 props。

最後兩個引數都是字串。如果你檢視 CodeSandbox，你會注意到這些字串自動成為我們的 h1 元素之間的內容。

你可以通過閱讀子元件中的 props.children 來訪問這些引數。