web-dev-qa-db-fra.com

Comment obtenir les données de React Context Consumer en dehors du rendu

J'utilise la nouvelle React Context API et j'ai besoin d'obtenir les données Consumer de la variable Context.Consumer et de ne pas les utiliser dans la méthode de rendu. Existe-t-il de toute façon que je peux y parvenir?

Pour illustrer ce que je veux:

console.log(Context.Consumer.value);

Ce que j'ai testé jusqu'à présent: l'exemple ci-dessus, a testé Context.Consumer currentValue et d'autres variables que Context Consumer a, a essayé d'exécuter Context.Consumer () en tant que fonction et aucune n'a fonctionné.

Des idées?

reactjsreact-context
14
Gustavo Mendonça

Mise à jour

Depuis React v16.6.0, vous pouvez utiliser l'API contextuelle comme:

class App extends React.Component {
    componentDidMount() {
       console.log(this.context);
    }
    render() {
       // render part here
       // use context with this.context
    }
}
App.contextType = CustomContext

Cependant, le composant ne peut accéder qu'à un seul contexte. Afin d'utiliser plusieurs valeurs de contexte, utilisez le modèle d'accessoire de rendu. En savoir plus sur Class.contextType .

Si vous utilisez le champ expérimental syntaxe des champs de classe publique , vous pouvez utiliser un champ de classe statique pour initialiser votre contextType:

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}

Render Prop Pattern

Lorsque ce que je comprends de la question, pour utiliser le contexte à l'intérieur de votre composant mais en dehors du rendu, créez un HOC pour envelopper le composant:

const WithContext = (Component) => {
  return (props) => (
      <CustomContext.Consumer>
           {value =>  <Component {...props} value={value} />}
      </CustomContext.Consumer>
  )
}

puis l'utiliser:

class App extends React.Component {
    componentDidMount() {
       console.log(this.props.value);
    }
    render() {
       // render part here
    }
}
export default WithContext(App);
22
Shubham Khatri