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

by

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.

More Related Contents:

  1. Detect click outside React component
  2. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  3. React.js: onChange event for contentEditable
  4. How do you set the document title in React?
  5. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  6. React Error: Target Container is not a DOM Element
  7. React, losing saved data in localStorage with useEffect after page refresh
  8. Retrieving value from with multiple option in React
  9. React.js: How to append a component on click?
  10. How to add function in JSX?
  11. How can I count text lines inside an DOM element? Can I?
  12. Fetch request to local file not working
  13. Dynamically creating HTML elements using Javascript?
  14. How to call an async function inside a UseEffect() in React?
  15. Why aren’t some technically serializable input properties serializable?
  16. React hooks: accessing up-to-date state from within a callback
  17. React.js – Communicating between sibling components
  18. React.js – Syntax error: this is a reserved word in render() function
  19. Add an element to the DOM with JavaScript
  20. onClick works but onDoubleClick is ignored on React component
  21. Error “Error: A is only ever to be used as the child of element”
  22. How to use React.forwardRef in a class based component?
  23. Can’t call setState on a component that is not yet mounted
  24. Redux Presentational Components Vs Container Component
  25. Converting Responsive Grid Layout to Plotly Dash
  26. Trying to use React.DOM to set body styles
  27. Dynamically Rendering a React component
  28. How to have nested loops with map in JSX?
  29. Performance penalty of creating handlers on every render with react-hooks
  30. How to programmatically fill input elements built with React?

Leave a Comment