已棄用

此 API 將在未來的 React 主要版本中移除。 查看替代方案。

createFactory 讓您可以建立一個函式，用以產生特定類型 React 元素。

const factory = createFactory(type)

參考

createFactory(type)

呼叫 createFactory(type) 來建立一個工廠函式，用以產生指定 type 的 React 元素。

import { createFactory } from 'react';

const button = createFactory('button');

然後你可以用它來建立沒有 JSX 的 React 元素

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

請參閱以下更多範例。

參數

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

傳回

傳回工廠函式。該工廠函式接收 props 物件作為第一個引數，接著是 ...children 引數清單，並傳回具有指定 type、props 和 children 的 React 元素。

用法

使用工廠建立 React 元素

儘管大多數 React 專案使用 JSX 來描述使用者介面，但 JSX 並非必要。過去，createFactory 曾經是其中一種不使用 JSX 來描述使用者介面的方式。

呼叫 createFactory 來建立特定元素類型的工廠函式，例如 'button'

import { createFactory } from 'react';

const button = createFactory('button');

呼叫該工廠函式將產生具有您提供的道具和子項目的 React 元素

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

這就是 createFactory 如何作為 JSX 的替代方案。然而，createFactory 已過時，您不應在任何新程式碼中呼叫 createFactory。請參閱如何從 createFactory 進行遷移。

替代方案

將 createFactory 複製到您的專案

如果您的專案有許多 createFactory 呼叫，請將此 createFactory.js 實作複製到您的專案

import { createFactory } from './createFactory.js';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

這樣就能讓您的所有程式碼保持不變，只有匯入的部分除外。

用 createElement 取代 createFactory

如果您有幾個 createFactory 呼叫，您不介意手動移植，而且您不想使用 JSX，您可以將每個呼叫工廠函數替換為 createElement 呼叫。例如，您可以將此程式碼替換為

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

使用此程式碼

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

以下是使用 React 而不用 JSX 的完整範例

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

使用 JSX 替換 createFactory

最後，您可以使用 JSX 而不是 createFactory。這是使用 React 最常見的方式

export default function App() {
  return (
    <button onClick={() => {
      alert('Clicked!');
    }}>
      Click me
    </button>
  );
};

陷阱

有時，現有的程式碼可能會將某些變數傳遞為 type，而不是像 'button' 這樣的常數

function Heading({ isSubheading, ...props }) {
  const type = isSubheading ? 'h2' : 'h1';
  const factory = createFactory(type);
  return factory(props);
}

要在 JSX 中執行相同的操作，您需要將變數重新命名，以大寫字母開頭，例如 Type

function Heading({ isSubheading, ...props }) {
  const Type = isSubheading ? 'h2' : 'h1';
  return <Type {...props} />;
}

否則，React 會將 <type> 解釋為內建 HTML 標籤，因為它是小寫的。

PreviouscreateElement
NextcreateRef

您喜歡這些文件嗎？