javascript - Access React component's function in HOC - Stack Overflow

admin管理员组

文章数量:1395159

I'm building a higher order ponent for my various React ponents. In this HOC, I need to access the child's methods and call them. How can I do it?

example HOC:

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    ponentDidMount() {
      if (Component.someFunction) {
          Component.someFunction()
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  };
}

example ponent:

class App extends React.Component {
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

// then it's used like this
export default withHOC(App)

I know that in some case it might not even make sense to solve it like this, but for example framework Next.js can do something similar with it's getInitialProps function.

I'm building a higher order ponent for my various React ponents. In this HOC, I need to access the child's methods and call them. How can I do it?

example HOC:

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    ponentDidMount() {
      if (Component.someFunction) {
          Component.someFunction()
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  };
}

example ponent:

class App extends React.Component {
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

// then it's used like this
export default withHOC(App)

I know that in some case it might not even make sense to solve it like this, but for example framework Next.js can do something similar with it's getInitialProps function.

• javascript
• reactjs
• inheritance

Share Improve this question Follow asked Mar 1, 2018 at 16:29 user3696212user3696212 3,43955 gold badges2020 silver badges3636 bronze badges 4

• 1 Will all ponents that are connected to HOC have someFunction, if not, if probably a bad idea to do this in HOC – Shubham Khatri Commented Mar 1, 2018 at 16:31
• @ShubhamKhatri most of them will, yes – user3696212 Commented Mar 1, 2018 at 16:36
• What if the wrapped ponent doesn't have that function, what would you want to do then – Shubham Khatri Commented Mar 1, 2018 at 16:38
• It doesn't matter for now. If it happens, there will be some function that will check it. – user3696212 Commented Mar 1, 2018 at 16:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Since you want to call the child ponents method in ponentDidMount of HOC, a better alternative is to indeed call the method in the ponentDidMount of the ponent itself, which would take care of the case when the child ponent doesn't have a function or if it is posed of multiple HOCs like

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return <Component {...this.props} />;
    }
  };
}

class App extends React.Component {
  ponentDidMount() {
     this.someFunction();
  }
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

However if you still want to call the function in child ponent, you would make use of refs(however if the App ponent is posed of other HOCs, this won't work)

export default function withHOC(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }
    ponentDidMount() {
         this.cmp.someFunction();
    }
    render() {
      return <Component ref={(ref) => this.cmp = ref} {...this.props} />;
    }
  };
}

class App extends React.Component {
  someFunction() {
    console.log("something done here, for example setState")
  }
  render() {
    return (
     <div></div>
    ); 
  }
}

If you replace :

if (Component.someFunction) {
  Component.someFunction()
}

By :

if (this.someFunction) {
  this.someFunction();
}

You should be able to access you ponent instance function.

Also, next.js getInitialProps function is static, that's why you can access it directly from the ponent class.

本文标签： javascriptAccess React component39s function in HOCStack Overflow