我知道在vanilla ES6中你可以写一个class
,extend
是一个function
类。这在这里解释。
React通过extend
和React.Component
支持ES6类组件和函数组件。但是,当我尝试extend
一个函数组件时,我得到了以下错误。
TypeError: Cannot call a class as a function
我正在尝试编写一些扩展组件的代码 , 适用于ES6类组件和函数组件。我想写一个函数返回一个组件,但不是一个更高阶的组件,我只是想扩展和修改一些 prop 。
下面是一些示例代码,我已经尝试过,不工作。这可能吗?我意识到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")
);
2条答案
按热度按时间7nbnzgx91#
警告,至少就我所知,这在react方面是不可能的,因为你需要继承React.Component,使其成为一个react组件,就像so bar只是一个函数一样。
你不需要使用react类,你可以使用常规函数。但我想你要找的是高阶组件。它可以为您传递给它的任何组件提供额外的功能。
你可以这样做,如果你真的想从普通班虽然。这是从类的文档中得到的。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
vvppvyoh2#
嗯……我觉得这完全说不通。
一个功能组件只是一个函数,你知道,一个渲染函数。
所以扩展一个函数组件意味着你将覆盖render函数,并且..这意味着你覆盖了整个函数组件(因为它只是一个渲染函数),然后你扩展了 nothing。