如何編寫擴展功能組件的ES6類React組件？

我知道在香草ES6中，你可以編寫一個classextend是一個功能類。這是解釋here。如何編寫擴展功能組件的ES6類React組件？

React支持兩個ES6類組件，通過extend ing React.Component和功能組件。儘管如此，嘗試extend功能組件時出現以下錯誤。

TypeError: Cannot call a class as a function

我試圖寫一個擴展組件和作品都ES6類組件和功能部件的一些代碼。我想編寫一個返回組件的函數，但我只想擴展和修改一些道具，而不是更高階的組件。

以下是我嘗試過的一些示例代碼，無法正常工作。這可能嗎？我意識到BarExtended根本不會渲染Bar，但我只是在測試。除非這是問題的一部分。

function Bar() { 
    return (
    <h1>Bar</h1> 
); 
} 

class BarExtended extends Bar { 
    render() { 
    return (
     <h1>BarExtended</h1> 
    ); 
    } 
} 

ReactDOM.render(
    <div> 
    <BarExtended /> 
    </div>, 
    document.getElementById("foo") 
);

來源

2017-01-12 Ryan

陣營建議過繼承組合物。函數可以很容易編寫，所以如果你遺漏繼承，你的問題就會消失。 – naomik

警告這是不可能的，至少就我的知識而言，儘管在反應方面做得不是那麼好，因爲你需要從React.Component繼承，使它成爲一個反應組件，所以bar只是一個函數。

class Bar extends React.Component { 

}

您不必使用有反應的類就可以使用常規函數。但我認爲你在尋找的是高階組件。這可以爲您傳遞給它的任何組件提供額外的功能。

function Bar(WrappedComponent){ 
return class BarExtended extends React.Component { 
    addThisFunction(){ 
    console.log('I extended the wrapped component with functionality') 
    } 
    render (
    return (
    <WrappedComponent addThisFunction={this.addThisFunction}/> 
    ) 
) 
} 
}

你可以做到這一點，如果你真的從普通班想要雖然。這是正確的類文檔。

function Animal (name) { 
    this.name = name; 
} 

Animal.prototype.speak = function() { 
    console.log(this.name + ' makes a noise.'); 
} 

class Dog extends Animal { 
    speak() { 
    console.log(this.name + ' barks.'); 
    } 
} 

var d = new Dog('Mitzie'); 
d.speak();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

來源

2017-01-12 02:55:24 Enjayy

嗯..我認爲它沒有任何意義。

功能組件只是一個功能，你知道，一個渲染功能。
因此，擴展一個功能組件意味着你將覆蓋渲染功能，並且..這意味着你覆蓋整個功能組件（因爲它只是一個渲染功能），那麼你擴展什麼也沒有。

來源

2017-01-12 02:51:31 CodinCat

從技術上講，擴展時不會被渲染函數覆蓋。它的作用就像一個構造函數，所以如果他的Bar函數看起來像這個函數Bar（）{console.log（「Hello」）; }'，它會輸出'Hello'到控制檯，一旦創建了'BarExtended'的實例。所以它確實擴展了一些東西，它不能作爲一個反應組件，因爲它沒有擴展'React.Component'。 –

如何編寫擴展功能組件的ES6類React組件？

回答

相關問題