React HOC返回一個匿名_class

Question

我正在使用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 。

Answer 1

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);

Answer 2

您的HOC返回一個匿名類，這就是它顯示為_class 。

要解決此問題，您可以將HOC的displayName設置為描述性內容 ，以覆蓋_class顯示行為。

例如，您可以將HOC顯示為DOM中的HigherOrderComponent(WrappedComponent) ，它更具描述性（並且更易於調試）。 這是一個慣例，其次是其他庫，如react-redux 。