React HOC返回一個匿名_class

我正在使用MaterialUI，更具體地說，我想以某種方式裝飾組件以處理組件級別的驗證狀態。React HOC返回一個匿名_class

我知道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。

來源

2017-05-08 Manuel Ro

您是否能夠用給定的解決方案解決問題？請讓我們知道。如果不是，我們可以幫助您進一步弄清楚。 –

你好，拉文德拉！不，不幸的是，HOC是不是最好的解決方案，或者在Material UI方面實現組件有一些問題，奇怪的是根據我讀過的HOC是一種組合，因此它必須有可能通過實現它來解決這個問題，組合不是別的，而是Liskov替代原則（SOLID原則之一），所以從邏輯的角度來看，它很有意義（我只是猜測）。 –

HOC主要用於交叉切割示例登錄的問題。您應用中的許多組件可能需要登錄功能，因此您可以動態地使用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);

來源

2017-05-08 03:28:54

React HOC返回一個匿名_class

回答

相關問題