4
votes

rendre le composant de réaction lorsque l'hélice change

comment forcer le rendu de notre composant lorsque les accessoires changent? comment forcer le rendu du composant parent lorsque les accessoires du composant enfant changent?

J'ai beaucoup cherché mais toutes les solutions sont obsolètes dans la nouvelle version de React.

dans mes pages quelconques (Route exact path = "/ post /: id" component = {post}) par exemple (siteUrl / post / 1) je reçois (: id) des accessoires (this.props.match. params) et cela fonctionne.

mais quand je suis dans le composant d'une seule page (Post) et cette Route (siteUrl / post / 1) lorsque je passe de nouveaux accessoires à ce composant (: id).

Les accessoires changeront mais le composant unique et le composant parent ne seront pas rendus ...

javascript reactjs react-props react-router-dom render

4 commentaires

Normalement, lorsque vous voulez que le parent effectue un nouveau rendu sur les changements enfants, vous appelez une fonction sur le parent, puis changez un état parent qui le rendra

Vous devez utiliser componentWillReceiveProps ou dans les versions plus récentes, utiliser getDerivedStateFromProps et définir votre état de manière appropriée pour déclencher le nouveau rendu

entendre, j'ai besoin de rendre le composant enfant à nouveau son composant parent ... j'ai beaucoup cherché mais toutes les solutions étaient obsolètes

vous pouvez également utiliser {this.state.visible && (... votre composant pour forcer le rerender ...)} pour effectuer le rendu, puis basculer la valeur d'état visible dans l'ordre en false puis sur true .

3 Réponses :

1
votes

Pour rendre le parent et l'enfant à nouveau, vous devez placer l'accessoire du parent vers son enfant.

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />
   }

cela rendra sûrement les deux composants, sauf si vous avez indiqué une autre logique dans componentShouldUpdate

dans votre cas, Router ressemble à un parent pour Parent donc vous ne devriez chemin que : id code> comme accessoire.

Assurez-vous que Router est au niveau supérieur, juste sous App

0 commentaires

0
votes

Il est important de commencer par initialiser la someVal de l'enfant dans le constructeur

 public static getDerivedStateFromProps(
        nextProps,
        nextState
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            initialVal,
            someVal: someVal
          };
        }
        return null;
      }

Ensuite, il sera renvoyé sur les changements d'accessoires car l'état change

0 commentaires

2
votes

Vous utilisez peut-être la méthode componentDidMount.

componentDidMount () est appelé immédiatement après qu'un composant est monté (inséré dans l'arbre). Initialisation qui nécessite DOM les nœuds devraient aller ici. Si vous devez charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la requête réseau.

mais vous devez utiliser componentDidUpdate.

componentDidUpdate () est appelé immédiatement après la mise à jour. Cette méthode n'est pas appelée pour le rendu initial.

Vous pouvez également utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. en savoir plus: https://reactjs.org/docs/hooks-effect.html

0 commentaires