Contexto en React (manera antigua, previa a React 16.3)

Context en React es una manera de crear un espacio de datos accesible por una rama del arbol de componentes de React

En el manejo del contexto intervienen dos actores: El Provider y el Consumer

La manera de manejarlo ha cambiado desde la versión React 16.3. La manera legacy de manejar el contexto está documentada en React aqui

Provider

En versiones anteriores a la 16.3 para definir el contexto que queremos propagar a hijos de un componente definimos en el Provider childContextTypes y getChildContext:

  • childContextTypes: propiedad static donde declaramos la estructura del objeto contexto que será pasado a los hijos. Como propTypes pero obligario en este caso
  • getChildContext: métodp del prototipo que devuelve el objeto contexto que será pasado a los hijos en la jerarquia. Cada vez que cambie el state, o que el componente reciba nuevas props se llamará este metodo.
class ContextProvider extends React.Component {
  static childContextTypes = {
    currentUser: React.PropTypes.object
  };
  getChildContext() {
    return {currentUser: this.props.currentUser};
  }

  render() {
    return(...);
  }
}

Consumer

Para acceder a esta información del contexto desde cualquier componente hijo Consumer podemos hacer…

Desde un componente con clase ES6

class ContextConsumer extends React.Component {
  /*
     contexTypes is a required static property to declare
     what you want from the context
  */
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

Desde un componente con clase ES6 con constructor propio

class ContextConsumer extends React.Component {
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  constructor(props, context) {
    super(props, context);
    ...
  }
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

Desde un componente funcional sin estado

/* Functional stateless component */
const ContextConsumer = (props, context) => (
  <div>{context.currentUser.name}</div>
);
ContextConsumer.contextTypes = {
  currentUser: React.PropTypes.object
};
Published 31 Oct 2018

Hola, soy JuanMa! En este blog iré compartiendo notas y descubrimientos relacionados con Javascript
Apuntes de JS on Twitter