我经常使用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.
如何正确传递输入？
传递要包装的 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 />上面的断言相同。
另一种解决方案是使用返回所需 HTML 的函数。
const EnhancedComponent = higherOrderComponent(()=><input />)