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

Question

我经常使用 HOCs 为现有的 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 syntactic sugar 对于 React.createElement('input').

如果 HOC 看起来像这样：

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

那么 render 方法最终是 returning

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

因此，将字符串 'input' 传递给 HOC 意味着它将 return React.createElement('input', {...});，这与上面断言的 <input /> 相同。

Answer 2

另一种解决方案是使用 returns 您想要的 HTML 的函数。

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

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

How do I pass an HTML element to a higher-order function (HOC) in React?

reactjs

jsx

higher-order-components