在React中定义和导出HOC

Question

我一直在研究高阶组件的反应.我的要求是我有一个集合组件,我需要扩展它们,以便在不重写整个组件的情况下为它们提供更多功能.在这种情况下,我发现了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;

我能用这种方式组件吗？或者我做错了吗？

Answer 1

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功能执行操作的组件