J'essaye de développer un mode d'édition pour une application.
En mode édition, certains boutons doivent avoir une opacité inférieure.
Une variable booléenne stocke si le mode d'édition est actif. Cette variable est transmise à ses fils à l'aide d'accessoires.
Si je change maintenant le editMode dans l'état des parents, les enfants ne sont pas rendus.
Parentclass:
<TouchableOpacity onPress={() => this.props.onEditPress()}>
<Image source={require('../res/edit-button.png')} style=styles.editButton}/>
</TouchableOpacity>
Sous-classe:
export default class Finalsubclass extends Component{
createStyle(){
return{
opacity: this.props.editMode ? 0.5 : 1,
}
}
render(){
return(
<TouchableOpacity style={this.createStyle()}/>
);
}
}
Sous-classe finale:
export default class Subclass extends Component{
render(){
return(
<View>
<Finalsubclass editMode={this.props.editMode}/>
</View>
);
}
}
Le bouton:
export default class Parentclass extends Component{
constructor(props){
super(props);
this.state = {
editMode: false,
};
}
render(){
return(
<View>
<EditButtonClass onEditPress={() => this.editButtonPress()}/>
<View>
<Subclass editMode={this.state.editMode}/>
</View>
</View>
);
}
editButtonPress(){
this.setState({editMode: true})
}
}
Le editMode dans les accessoires changent. Si je clique sur l'un des boutons, ils deviennent plus lumineux. Mais pas directement si j'active le mode d'édition.
Quelle est la meilleure façon de réaliser un nouveau rendu complet?
3 Réponses :
vous pouvez l'utilisateur réagir au cycle de vie pour restituer le composant
https: // reactjs. org / docs / react-component.html
et pour le problème ci-dessus, vous pouvez utiliser
componentWillReceiveProps(nextProps) {
...
}
J'ai essayé de cette façon mais la méthode n'est pas appelée.
Cela ne fonctionne pas car il est obsolète, utilisez plutôt componentDidUpdate (prevProps) . Si, pour une raison quelconque, vous voulez des accessoires willReceive, utilisez UNSAFE_componentWillReceiveProps ()
Ok merci, cette méthode est appelée. Mais comment rendre les composants pour ne pas entrer dans une boucle de rendu infinie?
La solution consistait à créer une vue autour de l'Opacité Touchable et à appliquer les styles à la vue.
Comme componentWillReceiveProps est obsolète, je suggère d'utiliser componentDidUpdate .
Pour répondre à la question dans votre commentaire, vous devez vérifier les prevProps code> avec les nouveaux pour ne pas obtenir une boucle infinie.
Par exemple:
if (prevProps.foo !== this.props.foo) {
//do what you need
}
Comme il s'agit d'un objet, si vous avez seulement besoin de vérifier une seule variable que vous pouvez simplement faire:
componentDidUpdate = (prevProps) => {
if(prevProps!==this.props){ /if the previous props are different from the current props
//do what you need
}
}
J'ai essayé mais je me suis trompé. Le composant est rendu, mais il y a un problème avec TouchableOpacity.
Pourriez-vous s'il vous plaît partager le code pour
editButtonPressJe ne vois aucun problème avec votre code, pouvez-vous expliquer ce que vous entendez par
Mais pas tous ensemble au moment où j'appuie sur le bouton.J'utilise plusieurs boutons qui sont générés en boucle. Bref, j'ai tout essayé avec un seul bouton. Le résultat est que la couleur du bouton n'est mise à jour que si je clique sur le bouton,
C'est parce que la valeur initiale est
falsece qui impliqueopacity: 1dans votre code@Rikin Oui, la valeur initiale doit être false. Une fois que j'active le editMode, cela devient vrai et mon bouton devrait devenir plus léger. Mais cela ne fonctionne pas instantanément, seulement après avoir cliqué sur le bouton.
C'est ainsi que vous l'avez conçu
EditButtonClassen cliquant pour basculer la valeur editMode et ainsi transmettre un nouvel étatOui c'est vrai. Et c'est comme ça que ça devrait être. Mais si je bascule le mode d'édition, le bouton devrait devenir plus lumineux. Et ça ne marche pas
Que voulez-vous dire par "si je bascule le mode d'édition ..."? Vous avez dit que vous avez fait cela en cliquant sur un bouton et cela a fonctionné.
Il y a un bouton pour basculer le mode d'édition. Il existe d'autres boutons qui devraient être plus clairs si le mode d'édition est actif. Cela ne fonctionne qu'en principe. Mais les autres boutons ne sont pas mis à jour une fois que le mode d'édition est activé. Ils ne sont mis à jour que lorsque vous les frappez.