在React中定义和导出HOC

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