11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Props et rendu

Bonjour voici le code https://codesandbox.io/s/props-ndeg1-m0f25

J'ai un Component Personne injecté dans mon index.js. Quand je crée le Component je lui met 2 props.
Nom : "John" Prenom:"Doe"

Dans index.js le Component se voit attribuer 2 props
Nom="Karasu" Prenom="Tan"


Je n'arrive pas à comprendre pourquoi :
1-lors du rendu les props du index.js prennent le pas (même si je comprends partiellement)
2-par contre lorsque je supprime une props du fichier index.js, les props du Component n'apparaissent pas. Je m'explique, si dans le fichier index.js je supprime la props "Prenom", ne devrais je pas avoir Karasu Doe en rendu et pourquoi?

merci
Modérateur
Et l'eau,

ton code est faux
Voilà la solution : 

import React, { Component } from "react";

export default class Personne extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h2>
        {this.props.Nom}
        {this.props.Prenom}
      </h2>
    );
  }
}


Ta compréhension de la poo est biaisée. Tu hérites mais tu ne fais pas appel à la class mère lors de l'instanciation. Ce qui aura pour effet que ton code sera bogué voir incorrect.

À noter qu'une props dans React est immuable. Ce qui n'est pas le cas de VueJS où les props sont aussi des states (data).
Modifié par niuxe (28 Nov 2019 - 23:14)
Merci Niuxe,

je suis en train de tester les props. Si je comprends bien je crée ma class , si besoin je fais un constructor qui hérite de la classe Mère et j'appelle cet héritage avec super.

A la base je souhaitais passer des props dans index.js et aussi dans le composant.
Modérateur
tankarasu a écrit :


je suis en train de tester les props. Si je comprends bien je crée ma class , si besoin je fais un constructor qui hérite de la classe Mère et j'appelle cet héritage avec super.


Je t'invite à lire la méthode super()

tankarasu a écrit :
A la base je souhaitais passer des props dans index.js et aussi dans le composant.


tu peux
Sujet clos
Aller à