如何将HTML元素传递给React中的高阶函数(HOC)？
如何将HTML元素传递给React中的高阶函数(HOC)？
提问于 2018-02-18 09:48:27
我经常使用HOCs为现有的React组件提供额外的功能，这非常简单：
import Component from '/path/to/Component';
import higherOrderComponent from '/path/to/higherOrderComponent';
const EnhancedComponent = higherOrderComponent(Component);但是，我需要包装一个简单的HTML，它不是作为一个独立的input组件存在的。我试过了
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.如何正确地传递输入？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-18 09:48:27
传递要包装的HTML元素的字符串名称：
const EnhancedInput = higherOrderComponent('input');这个错误提示了我需要做什么，并且在分解JSX正在做的事情时更有意义。<input />就是React.createElement('input')的JSX syntactic sugar。
如果HOC看起来像这样：
const higherOrderComponent = (Component) => {
return class extends React.Component {
render() {
return (
<Component {...} />
);
}
}
};那么render方法最终将返回
React.createElement(Component, {...});因此，将字符串'input'传递给HOC意味着它将返回React.createElement('input', {...});，这与上面断言的<input />相同。
Stack Overflow用户
发布于 2018-05-28 18:17:45
另一种解决方案是使用返回所需HTML的函数。
const EnhancedComponent = higherOrderComponent(()=><input />)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48847684
复制相关文章
相似问题