How to access component methods from outside in ReactJS

Question

Why can   t I access the component methods from    outside    in ReactJS  Why is it not possible and is there any way to solve it     Consider the code     var Parent   React createClass        render  function              var child    lt Child   gt            return                 lt div gt                    child someMethod       expect  bar   got a  not a function  error                lt  div gt                             var Child   React createClass        render  function              return                 lt div gt                   foo               lt  div gt                           someMethod  function              return  bar                  React renderComponent  lt Parent   gt   document body

User · Accepted Answer

React provides an interface for what you are trying to do via the ref attribute. Assign a component a ref, and its current attribute will be your custom component:

class Parent extends React.Class {
    constructor(props) {
        this._child = React.createRef();
    }

    componentDidMount() {
        console.log(this._child.current.someMethod()); // Prints 'bar'
    }

    render() {
        return (
            <div>
                <Child ref={this._child} />
            </div>
        );
    }
}

Note: This will only work if the child component is declared as a class, as per documentation found here: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

Update 2019-04-01: Changed example to use a class and createRef per latest React docs.

Update 2016-09-19: Changed example to use ref callback per guidance from the ref String attribute docs.

User · Answer

Since React 0 12 the API is slightly changed  The valid code to initialize myChild would be the following   var Child   React createClass         var myChild   React render React createElement Child       mountNode   myChild someMethod

User · Answer

Alternatively  if the method on Child is truly static  not a product of current props  state  you can define it on statics and then access it as you would a static class method  For example   var Child   React createClass     statics        someMethod  function           return  bar                            console log Child someMethod       bar

User · Answer

You could also do it like this  not sure if it s a good plan  D  class Parent extends Component     handleClick         if  this  getAlert     null          this  getAlert                render         return          lt div gt           lt Child gt            getAlert  childScope    gt               lt span gt    this  getAlert   this  getAlert   getAlert bind childScope    null  lt  span gt                      lt  Child gt           lt button onClick       gt  this handleClick    gt  Click me lt  button gt         lt  div gt                      class Child extends Component     constructor         super        this state     count  0          getAlert         alert  Child function called state    this state count         this setState   count  this state count   1            render         return this props children this getAlert  this

User · Answer

As mentioned in some of the comments  ReactDOM render no longer returns the component instance   You can pass a ref callback in when rendering the root of the component to get the instance  like so      React code  jsx  function MyWidget el  refCb        ReactDOM render  lt MyComponent ref  refCb    gt   el     export default MyWidget    and      vanilla javascript code var global widget instance   MyApp MyWidget document getElementById  my container    function widget        global widget instance   widget       global widget instance myCoolMethod

User · Answer

Another way so easy    function outside   function funx functionEvents  params      console log  events of funx function     functionEvents     console log  this of component     this     console log  params     params     thisFunction persist        Bind it   constructor props       super props       this state           this funxBinded   funx bind this           Please see complete tutorial here  How to use  this  of a React Component from outside

User · Answer

As of React 16 3  React createRef can be used   use ref current to access  var ref   React createRef    var parent        lt div gt       lt Child ref  ref    gt       lt button onClick  e  gt console log ref current      lt  div gt      React renderComponent parent  document body

User · Answer

If you want to call functions on components from outside React  you can call them on the return value of renderComponent   var Child   React createClass         var myChild   React renderComponent Child   myChild someMethod      The only way to get a handle to a React Component instance outside of React is by storing the return value of React renderComponent  Source

[javascript] How to access component methods from “outside” in ReactJS?

Examples related to javascript

Examples related to reactjs

Examples related to dom

Examples related to higher-order-components