已棄用

此 API 將在未來 React 的主要版本中刪除。 檢視替代方案。

createFactory 允許您建立一個函式，該函式生成給定型別的 React 元素。

const factory = createFactory(type)

參考

createFactory(type)

呼叫 createFactory(type) 建立一個工廠函式，該函式生成給定 type 的 React 元素。

import { createFactory } from 'react';

const button = createFactory('button');

然後你可以使用它來建立 React 元素，而無需使用 JSX

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');
}

以下是不使用 JSX 的 React 的完整示例。

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 標籤，因為它是小寫的。

上一頁createElement
下一頁createRef