Question

我经常使用HOCs为现有的React组件提供额外的功能，这非常简单：

let value = UppercaseWords(values)

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

var makeCap = from values in PersonInfoS       
              select UppercaseWords(values);

并收到以下错误：

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

const EnhancedComponent = higherOrderComponent(Component);

如何正确传递输入？

Answer 1

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

input

错误让我陷入了我需要做的事情，并在分解JSX正在做的事情时更有意义。对于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.只是JSX syntactic sugar。

如果HOC看起来像这样：

const EnhancedInput = higherOrderComponent('input');

然后<input />方法最终返回

React.createElement('input')

因此，将字符串const higherOrderComponent = (Component) => { return class extends React.Component { render() { return ( <Component {...} /> ); } } };传递给HOC意味着它将返回render，这与上面声明的React.createElement(Component, {...});相同。

Answer 2

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

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

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

2 个答案: