我一直在研究React中的高阶组件。我的要求是我有一组需要扩展的组件,以便在不重写整个组件的情况下提供更多功能。在这种情况下,我发现了反应中的HOC概念,即可以使用纯函数扩展组件。我的问题是,我可以将扩展组件导出为普通组件吗?举个例子
需要扩展的组件
class foo extends React.Component { render(){ //something } } export default foo;
HOC组件
function bar(foo) { render() { return <foo {...this.props} {...this.state} />; } } export default bar;
我可以那种方式使用组件吗?还是我做错了?
HOC会获取一个组件,添加更多功能并返回一个新组件,而不仅仅是返回组件实例,
你会做的是
function bar(Foo) { return class NewComponent extend React.Component { //some added functionalities here render() { return <Foo {...this.props} {...otherAttributes} /> } } } export default bar;
现在,当您想向组件添加一些功能时,可以创建该组件的实例,例如
const NewFoo = bar(Foo);
您现在可以像
return ( <NewFoo {...somePropsHere} /> )
另外,您可以允许HOC接受默认组件并将其导出为默认组件,并在其他地方使用它,例如
function bar(Foo = MyComponent) {
然后创建一个像
const wrapMyComponent = Foo(); export { wrapMyComponent as MyComponent };
HOC的典型用例可以是HandleClickOutside功能,通过该功能,您可以传递需要根据handleClickOutside功能采取措施的组件
HandleClickOutside
handleClickOutside