如何在React中将HTML元素传递给高阶函数（HOC）？

Question

我经常使用HOC为现有的React组件提供附加功能，这非常简单：

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

const EnhancedComponent = higherOrderComponent(Component);

但是，我需要包装一个简单的HTML input，它不作为独立的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.

如何正确传递输入？

Answer 1

传递要包装的HTML元素的字符串名称：

const EnhancedInput = higherOrderComponent('input');

该错误使我陷入需要做的事情，并且在分解JSX正在做的事情时更有意义。<input />简直是JSX语法糖的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 />上面声明的相同。

Answer 2

另一种解决方案是使用返回所需 HTML 的函数。

const EnhancedComponent = higherOrderComponent(()=><input />)