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

【问题标题】：How do I pass an HTML element to a higher-order function (HOC) in React?如何将 HTML 元素传递给 React 中的高阶函数 (HOC)？
【发布时间】：2018-07-28 14:19:56
【问题描述】：

我经常使用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.

如何正确传递输入？

【问题讨论】：

标签： reactjs jsx higher-order-components

【解决方案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 方法最终会返回

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

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

【讨论】：

这不允许插入子节点而不向您的 HOC 函数添加额外的功能。考虑以下 user2542281 的解决方案作为替代方案。
@Artif3x 确实如此。我认为您可能误解了 HOC 的应用和使用方式。您应该传递一个组件函数或类，而不是一个实例。一旦应用了 HOC，您就可以实例化增强的组件并传递您想要的任何子组件。请参阅reactjs.org/docs/higher-order-components.html 了解更多信息。
据我了解您的回答，您建议仅使用单个字符串作为 highOrderComponent 函数的参数，我相信包含的代码示例中的原始问题是如何将 JSX 用作参数。您的示例当然适用于单个 HTML 标记，但无法使用您的字符串示例并且仍然包含子节点，因为 JSX 很容易允许。您可以向 HOC 函数添加更多参数，但这似乎是一个比简单地将 JSX 包装在箭头函数中更复杂且难以阅读的解决方案。
再次，我认为您误解了 HOC 的使用方式。传递孩子与原始问题无关，因为这通常会使用“增强”组件来完成。这是我认为您要求的示例：codepen.io/anon/pen/xmggyg?editors=0010

【解决方案2】：

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

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

【讨论】：

这是正确答案。上面接受的一个不允许输入标签中的子节点。
@Artif3x 你仍然可以在 React.createElement 的 props 参数中明确指定 children 属性