在React中定义和导出HOC

小编典典

在React中定义和导出HOC

reactjs

我一直在研究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;

我可以那种方式使用组件吗？还是我做错了？

阅读 399

2020-07-22

共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功能采取措施的组件

2020-07-22