Je connais le gist de convertir des composants de classe de réagisme à des composants fonctionnels, mais j'ai trouvé une instance où je ni ma recherche sur Internet ne connaissent la réponse.
export default class Counter extends Component<Props, State> {
count = 0
updateCount = ()=> this.count +=1
render() {
return <div onClick={this.updateCount}>{this.count}</div>
}
}
3 Réponses :
avec Cependant, vous devez savoir que la mise à jour d'une référence ne provoque pas de re-rendu et que la valeur mise à jour ne reflétera donc pas dans le rendu Si vous souhaitez déclencher une re-rendue, utilisez useref , vous pouvez créer une variable qui n'est pas initialisée à chaque re-rendu. Le composant ci-dessus ressemblerait à usestate au lieu de
Il s'agit d'un exemple direct de déplacer le composant sur un composant fonctionnel. Le compte restera en cours d'utilisation tant que le composant ne remonte pas complètement. Il restera même après des re-rendus.
export default function Counter(){
const [count,setCount] = useState(0);
return <div onClick={()=>setCount(count=>count+1)}>{count}</div>
}
Vous ne pouvez pas transporter la valeur mise à jour du nombre avec useref, car aucun repéreur ne se produit lorsque le nombre est mis à jour. Useref est pour persister un objet dans une composante sur plusieurs rendants.
Une solution possible pour votre problème de promotionPools: au lieu de convertir le parent en un composant fonctionnel, utilisez la méthode de cycle de vie de CompomponUpdate () dans votre composant de classe afin d'empêcher la rédaction du composant enfant lorsque l'état est modifié.
Jetez un coup d'œil à la LifeCycle Docs pour plus d'informations: https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Essayez de rester près de la composante d'origine. L'échantillon que vous avez fourni n'a pas de sens puisque il n'est pas re-rendu après la mise à jour du nombre. Montrez comment votre promoteur est mis à jour et comment affecte le résultat du rendu.