Comment partager des données au sein des composants de réaction

Cette fois, je vais vous montrer comment partager des données dans les composants React et quelles sont les précautions à prendre pour partager des données dans les composants React. Voici un cas pratique, jetons un oeil.

Utilisez React-redux pour partager des données entre les données des composants React

1 Installez React-Redux

$ npm i --save react-redux

2. importe le composant approprié et attribue le magasin à l'attribut de magasin du fournisseur

encapsule le composant racine avec le fournisseur.

import {Provider,connect} from 'react-redux'
ReactDOM.render(
<Provider store={store}>
 <Wrap/>
</Provider>,document.getElementById('example'))

De cette façon, tous les sous-composants du composant racine peuvent obtenir la valeur dans le magasin

3. Connectez l'encapsulation secondaire du composant racine

export default connect(mapStateToProps,mapDispatchToProps)(Wrap)

connect reçoit deux fonctions A en paramètre, un mapStateToProps qui définit quelles propriétés du magasin seront mappées aux propriétés du composant racine (transmettez le magasin dans le composant React) et un mapDispatchToProps qui définit quelles actions peuvent être utilisées en tant que composant racine propriétés (transmettre les données du composant React dans le magasin)

3. Définissez ces deux fonctions de mappage

function mapStateToProps(state){
 return {
  name:state.name,
  pass:state.pass
 }
}
function mapDispatchToProps(dispatch){
 
 return {actions:bindActionCreators(actions,dispatch)
 }
}

pour mapper le nom et transmettre dans le magasin le nom et transmettre les attributs. du composant racine.

actions est un objet qui contient la fonction de construction d'action. Utilisez bindActionCreators pour lier les actions de l'objet à l'attribut actions du composant racine.

4. Utilisez <Show name={this.props.name} pass={this.props.pass}></Show> où le composant racine fait référence au sous-composant pour transmettre les données du magasin dans le sous-composant

5. Appelez la méthode dans les actions du sous-composant pour mettre à jour le magasin dans. les données

<Input actions={this.props.actions} ></Input>

Transmettez d'abord les actions en tant qu'attributs au sous-composant

Le sous-composant appelle la méthode dans les actions pour créer une action

//Input组件
export default class Input extends React.Component{
sure(){
this.props.actions.add({name:this.refs.name.value,pass:this.refs.pass.value})
}
 render(){ 
  return (
    <p> 
  姓名:<input ref="name" type="text"/>
  密码:<input ref="pass" type="text"/>
  <button onClick={this.sure.bind(this)}>登录</button>
 </p>
  )
 }
}

Parce que nous utilisons la fonction bindActionCreators , Après avoir créé l'action, store.dispatch(action) sera automatiquement appelé immédiatement pour mettre à jour les données dans le magasin.

De cette façon, nous utilisons le module réagir-redux pour compléter le partage de données entre les différents composants de réaction .

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez JS pour manipuler des images et ne laisser que du noir et blanc

Comment utiliser les composants vue dans projets actuels

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!