expose component methods

Do you want to request a feature or report a bug?

request a feature

What is the current behavior?

methods of components cannot be exposed

What is the expected behavior?

I would like to be able to expose methods of a component so it can be used from a container component, it can be done through an attribute similar to ‘ref’, like for example ‘expose’

For example, imagine a have a car component and a wheel component, the car would like to rotate the wheels using a method that the wheels expose to the cars

Something like:

class Car extends Component {
  constructor(props) {
    super(props);
  }
  rotateWheels() {
    this.wheels.rotate(32);
  }
  render() {
    return (
      <Body/>
      <Wheels expose={ ({ rotate }) => this.wheels.rotate = rotate }/>
    );
  }
}

class Wheels extends Component {
  constructor(props) {
    super(props);
    this.state = {
       wheelRotation: 0;
    };
  }
  rotateWheels(angle) {
    this.setState({wheelRotation: angle}); 
  }
  render() {
    const wheelStyle = {transform: `rotate(${this.state.wheelRotation}deg)`} 
    return (
      <div className="wheel" style={wheelStyle}/>
      <div className="wheel" style={wheelStyle}/>
      <div className="wheel" style={wheelStyle}/>
      <div className="wheel" style={wheelStyle}/>
    );
  }
}

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

all versions, all browsers

[gaearon]

Instance ref lets you access instance methods (this is what it’s for). Still, the right way to implement this in React in most cases is to provide a declarative API as mentioned above.

[gaearon]

it’s the responsibility of the carousel component. It’s dynamically calculated based on the items array and the carrousel width and it has a nextPage() method, and a previousPage(), and a goToPage() that modify the current page state parameter from the carousel

Typically in React you solve this by providing a declarative API in props instead. For example instead of goToPage() method you would implement a currentPage numeric prop. This way it can be controlled with state by any component higher up the tree.