Defining And Exporting Hoc In React

I've been research Higher Order Components in react. My requirement is that I have a set components which I need to extend to give them more functionality without rewriting the ent

Solution 1:

A HOC would take a component, add some more functionality and return a new component and not just return the component instance,

What you would do is

functionbar(Foo) {

   returnclassNewComponent extend React.Component {
        //some added functionalities hererender() {
            return<Foo {...this.props} {...otherAttributes} />
        }
   }

}

exportdefault bar;

Now when you want to add some functionality to a component you would create a instance of the component like

const NewFoo = bar(Foo);

which you could now use like

return (
    <NewFoo {...somePropsHere} />
)

Additionally you could allow the HOC to take a default component and export that as a default component and use it elsewhere like

functionbar(Foo = MyComponent) {

and then create an export like

const wrapMyComponent = Foo();
export { wrapMyComponent asMyComponent };

A typical use-case of an HOC could be a HandleClickOutside functionality whereby you would pass a component that needs to take an action based on handleClickOutside functionality

Solution 2:

Another way could be like this:

Make a Foo Component

classFooextendsReact.Component {
    render() {
      return ( < h1 > hello I am inFoo < /h1>)
      }
    }

Make a HOC component.

classMainextendsReact.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      component, props
    } = this.props;
    //extract the dynamic component passed via props.varComponent = component;

    return ( < div > 
          < h1 > I am in main < /h1> 
          < Component {...props} > < /Component>
          </div > );
  }
}


ReactDOM.render( < Main component = {
    Foo
  } > < /Main>,
  document.getElementById('example')
);

Working code here

Solution 3:

Yes you can

constbar = (Foo) => {
   returnclassMyComponent extend Component {
        render() {
            return<Foo {...this.props} />
        }
   }
}

//Our Foo Component Code Here

export default bar(Foo)

But again it depends on the functionality. Eg: suppose you're using react router and want to check if user is present before rendering the component don't pass the HOC. eg:

<Routepath="/baz"component={auth(Foo)} />

Instead use an new component.

Note: NewComponent is connected to redux and user (state) is passed as props

classNewRouteextendsComponent{
    render(){
        const {component:Component, ...otherProps} = this.props;

        return(
          <Routerender={props => (
            this.props.user? (
              <Component {...otherProps} /> 
              ):(
              <Redirectto="/" />
                )
            )} 
          />
        );
    }
}

Then on the routes

<NewRoutepath='/foo'component={Foo} />