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 = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);

Maybe you need Pubsub ?

Lin Du
– Lin Du

2016-11-04 07:18:10 +00:00
Commented Nov 4, 2016 at 7:18 — Lin Du
– Lin Du, Commented Nov 4, 2016 at 7:18

Ross Allen · Accepted Answer · 2019-05-07 21:44:51Z

223

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.

edited May 7, 2019 at 21:44

answered Jul 20, 2014 at 7:10

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

elQueFaltaba Over a year ago

So, the only way to communicate between two child components would be with both having refs and going through a proxy method on the common parent?

Ross Allen Over a year ago

React encourages data-driven components. Let one child call a callback that changes data in its ancestor, and when that data changes the other child will get new props and re-render appropriately.

HussienK Over a year ago

@RossAllen, haha yes, you would have had to remove the semicolon too in that case.

Ross Allen Over a year ago

@HussienK I prefer to use a block if the function should have no return value so intent is obvious to the next developer who reads the code. Changing that to {(child) => this._child = child} would create a Function that always returned true, but that value is not used by React's ref attribute.

Sjoerd · Accepted Answer · 2015-08-17 11:14:25Z

40

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.

edited Aug 17, 2015 at 11:14

answered Sep 25, 2014 at 8:27

Sjoerd

75.9k16 gold badges140 silver badges180 bronze badges

1 Comment

Vlad Povalii Over a year ago

actually it works for react16. ReactDOM render method returns a reference to the component (or returns null for stateless components).

Paul O'Shannessy · Accepted Answer · 2014-07-21 18:07:58Z

38

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

answered Jul 21, 2014 at 18:07

Paul O'Shannessy

2,49818 silver badges10 bronze badges

1 Comment

tirdadc Over a year ago

Source for this is here.

Aldo Canepa · Accepted Answer · 2020-10-23 14:42:45Z

10

As of React 16.3 React.createRef can be used, (use ref.current to access)

var ref = React.createRef()

var parent = (
  <div>
    <Child ref={ref} />
    <button onClick={e=>console.log(ref.current)}
  </div>
);

React.renderComponent(parent, document.body)

edited Oct 23, 2020 at 14:42

Aldo Canepa

2,0172 gold badges20 silver badges16 bronze badges

answered Dec 5, 2018 at 0:39

Jay

1,82115 silver badges11 bronze badges

Comments

Yevgen Safronov · Accepted Answer · 2015-08-31 13:24:36Z

4

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();

answered Aug 31, 2015 at 13:24

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

Comments

swennemen · Accepted Answer · 2016-10-28 19:23:52Z

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 (
      <div>
        <Child>
        {(getAlert, childScope) => (
          <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span>
        )}
        </Child>
        <button onClick={() => this.handleClick()}> Click me</button>
      </div>
      );
    }
  }

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)
  }
}

mgalgs · Accepted Answer · 2017-02-07 06:53:44Z

2

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(<MyComponent ref={refCb} />, 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();

answered Feb 7, 2017 at 6:53

mgalgs

17k12 gold badges66 silver badges78 bronze badges

Comments

Hou Soune · Accepted Answer · 2019-12-05 15:32:03Z

-1

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?

answered Dec 5, 2019 at 15:32

Hou Soune

1971 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

8 Answers 8

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related