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

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.

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.

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