已废弃

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

参见下面更多示例

参数

  • typetype 参数必须是一个有效的 React 组件类型。例如,它可以是标签名称的字符串(如 'div''span'),或一个 React 组件(函数式组件、类式组件或一个特殊的组件,如 Fragment)。

返回值

返回一个工厂函数。该工厂函数接收一个 props 对象作为第一个参数,后跟一系列的 ...children 参数,并返回一个具有给定 typepropschildren 的 React 元素,


用法

使用工厂函数创建 React 元素

尽管大多数 React 项目都使用 JSX 来描述用户界面,但并非必须使用 JSX。在过去,createFactory 曾是一种在没有 JSX 的情况下描述用户界面的方法之一。

调用 createFactory 来为特定的元素类型,如 'button',创建一个 工厂函数

import { createFactory } from 'react';

const button = createFactory('button');

调用该工厂函数将生成具有你提供的 propschildren 的 React 元素:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('已点击!')
    }
  }, '点我');
}

这就是 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('已点击!')
    }
  }, '点我');
}

这可以在只更改导入的情况下,保持其他所有代码不变。


使用 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('已点击!')
    }
  }, '点我');
}


使用 JSX 替代 createFactory

最终,你可以使用 JSX 替代 createFactory。这也是大多数使用 React 的方式:

export default function App() {
  return (
    <button onClick={() => {
      alert('已点击!');
    }}>
      点我
    </button>
  );
};

陷阱

有时,现有代码可能会将某个变量而不是 'button' 这样的常亮作为 type 传递:

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 标签。