Puis-je ajouter deux proptypes après leur rendu? Si oui, comment puis-je accomplir cela?

Question

() J'ai une div avec un accessoire que je voudrais afficher en fonction du fait qu'un accessoire soit plus grand qu'un autre. J'ai beaucoup de choses dans ce volet particulier et je crains que toutes les choses suivantes que j'essaie de faire ne soient pas possibles. This.props.currentValue < this.props.newValue ne fonctionne pas pour moi, mais tout le reste fonctionne très bien.

Je suis très nouveau à React. Toute aide serait géniale!

Oh, et la valeur de currentValue et newValue sont à l'intérieur du composant tarifs sur une page séparée.

Answer 1

La ligne avec this.displayThing ne le rendu rien parce que vous passez une référence à la fonction elle-même, au lieu d'appeler la fonction et de rendre la valeur qu'elle retourne. Cette ligne devrait faire ce que vous attendez si vous changez this.displayThing en this.displayThing().

Mais vous avez également des tags incompatibles. Le composant En-tête est ouvert et fermé sur la même ligne. De votre indentation, il semble que vous vouliez que les lignes ci-dessous soient affichées en tant qu'enfant du composant En-tête, mais ce n'est pas ce qui se passe réellement.

Vous pouvez nettoyer ça comme ça:

return (
    <div> 
     <Header heading="Rates"> 
      <div className="value-heading">{currentValue}</div> 
      <div className="value-heading">{newValue}</div>       
     </Header> 

     <div>{this.displayThing()}</div> 
    </div> 
); 

Ou, si votre composant d'en-tête ne rend pas d'enfants, cela pourrait ressembler à ceci:

return (
    <div> 
     <Header heading="Rates" /> 

     <div className="value-heading">{currentValue}</div> 
     <div className="value-heading">{newValue}</div>       

     <div>{this.displayThing()}</div> 
    </div> 
); 

---

Si vous Pour aller un peu plus loin, vous pouvez également supprimer un peu de code et simplifier un peu la classe en définissant la fonction displayThing comme une fonction de flèche:

Au lieu de cela:

export class Rates extends Component { 
    constructor(props) { 
     super(props); 
     this.displayThing = this.displayThing.bind(this); 
    } 

    displayThing() { 
     const increase = <div>{this.props.details}</div>; 
     const thing = <div>hi</div>; 
     if (this.props.currentValue < this.props.newValue) { 
      return increase; 
     } else { 
      return thing; 
     } 
    } 

    // ... rest of the class 
} 

vous pouvez faire displayThing en une fonction de flèche et de se débarrasser du constructeur, comme celui-ci:

export class Rates extends Component { 
    displayThing =() => { 
     const increase = <div>{this.props.details}</div>; 
     const thing = <div>hi</div>; 
     if (this.props.currentValue < this.props.newValue) { 
      return increase; 
     } else { 
      return thing; 
     } 
    } 

    // ... rest of the class 
} 

Les travaux de classe même de toute façon, mais il sauve quelques lignes de code.