MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
Créé un fichier js distinct du contexte où je peux accéder à mon parent ainsi qu'à mon composant enfant
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
Message: "Welcome React",
ReturnMessage:""
};
}
render() {
return (
<MyContext.Provider value={{state: this.state}}>
<Child />
</MyContext.Provider>
)
}
}
Donc créé un composant parent, avec contexte fournisseur et appelant composant enfant dans l'onglet fournisseur
Child.js
import MyContext from "./MyContext.js";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
ReturnMessage:""
};
}
ClearData(context){
this.setState({
ReturnMessage:e.target.value
});
context.state.ReturnMessage = ReturnMessage
}
render() {
return (
<MyContext.Consumer>
{(context) => <p>{context.state.Message}</p>}
<input onChange={this.ClearData(context)} />
</MyContext.Consumer>
)
}
}
Ainsi, dans enfant en utilisant consommateur peut afficher la partie de rendu dans enfant ..
Je suis confronté à mettre à jour de consommateur à État fournisseur.
Comment mettre à jour l'état du fournisseur ou manipuler l'état du fournisseur?
Tout d'abord, pour mettre à jour le contexte à partir du consommateur, vous devez accéder au contexte en dehors de la fonction de rendu. Pour plus d'informations sur cette opération, cochez
Accès au contexte de réaction en dehors de la fonction de rendu
Deuxièmement, vous devez fournir un gestionnaire de fournisseur qui met à jour la valeur de contexte et non le muter directement. Votre code ressemblera à
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
Message: "Welcome React",
ReturnMessage:""
};
}
updateValue = (key, val) => {
this.setState({[key]: val});
}
render() {
return (
<MyContext.Provider value={{state: this.state, updateValue: this.updateValue}}>
<Child />
</MyContext.Provider>
)
}
}
Enfant
import MyContext from "./MyContext.js";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
ReturnMessage:""
};
}
ClearData(e){
const val = e.target.value;
this.setState({
ReturnMessage:val
});
this.props.context.updateValue('ReturnMessage', val);
}
render() {
return (
<React.Fragment>
<p>{this.props.context.state.Message}</p>}
<input onChange={this.ClearData} />
</React.Fragment>
)
}
}
const withContext = (Component) => {
return (props) => {
<MyContext.Consumer>
{(context) => {
return <Component {...props} context={context} />
}}
</MyContext.Consumer>
}
}
export default withContext(Child);
Vous devez écrire une fonction dans le composant Fournisseur pour mettre à jour l'état . Pour être exact, le consommateur ne peut utiliser que les valeurs et les fonctions que vous avez écrites dans le composant Fournisseur.
Dans la composante parent
updateReturnMessage = (ReturnMessage) => {
this.setState((prevState) => ({ ...prevState, ReturnMessage }))
}
<MyContext.Provider value={{ state: this.state, updateReturnMessage: this.updateReturnMessage }}>
// your code goes here
</MyContext.Provider>
En composante enfant:
ClearData(e){
const val = e.target.value;
this.context.updateReturnMessage(val);
}
Cette fonction est similaire au action creators
disponible dans Redux
et flux