如何将 HTML 元素传递给 React 中的高阶函数 (HOC)？

我经常使用HOCs https://reactjs.org/docs/higher-order-components.html为现有的 React 组件提供附加功能，这非常简单：

import Component from '/path/to/Component';
import higherOrderComponent from '/path/to/higherOrderComponent';

const EnhancedComponent = higherOrderComponent(Component);

但是，我需要包装一个简单的 HTMLinput，它不作为独立的 React 组件存在。我试过

const EnhancedInput = higherOrderComponent(<input />);

并得到以下错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

如何正确传递输入？

传递要换行的 HTML 元素的字符串名称：

const EnhancedInput = higherOrderComponent('input');

这个错误提示我需要做什么，并且在分解 JSX 正在做的事情时更有意义。<input />简直就是JSX 语法糖 https://reactjs.org/docs/react-api.html#creating-react-elements for React.createElement('input').

如果 HOC 看起来像这样：

const higherOrderComponent = (Component) => {
  return class extends React.Component {
    render() {
      return (
        <Component {...} />
      );
    }
  }
};

那么render方法最终返回

React.createElement(Component, {...});

因此，传递字符串'input'到 HOC 意味着它将返回React.createElement('input', {...});，这与<input />正如上面所断言的。