小编典典

在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;

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


阅读 400

收藏
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