[英]React HOC returns an anonymous _class
我正在使用MaterialUI,更具体地说是TextField
组件,我想以某种方式修饰它以处理组件级别的验证状态。
我知道反应中的HOC,这种模式似乎是完美的。 但是我必须返回一个匿名类,因此我无法获得TextField
组件的值,因为返回的类型是_class
而不是TextField
。
我是否对HOC模式做错了,或者这可能不是在不修改原型的情况下重用组件的最佳方法。 任何帮助将不胜感激。
HOC声明
export default function hocInputValidator( WrappedComponent ){
return class extends Component{
constructor(props){
super(props);
}
handleChange(){
console.log('Handling from HOC');
}
render(){
return <WrappedComponent {...this.props}/>
}
}
}
调用和导出装饰组件
export default hocInputValidator(TextField);
当我尝试通过refs
访问装饰组件时,类型是_class
而不是TextField
。
HOC主要用于交叉示例Login的示例。 您的应用中的许多组件可能需要登录功能,因此您可以动态地用HOC包装它们。 HOC将仅包装传递给它的组件。 在您的情况下,我在您的代码中发现了一些问题。 我在下面修了它们。
export default function ( WrappedComponent ){
class HocInputValidator extends Component{
constructor(props){
super(props);
}
handleChange(){
console.log('Handling from HOC');
}
render(){
return <WrappedComponent {...this.props}/>
}
}
return HocInputValidator;
}
调用应该是这样的。
import inputValidator from './components/input_validator';
inputvalidator(TextField);
您的HOC返回一个匿名类,这就是它显示为_class
。
要解决此问题,您可以将HOC的displayName
设置为描述性内容 ,以覆盖_class
显示行为。
例如,您可以将HOC显示为DOM中的HigherOrderComponent(WrappedComponent)
,它更具描述性(并且更易于调试)。 这是一个惯例,其次是其他库,如react-redux
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.