已弃用

此 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