ReactJS - Comment utiliser les commentaires?


204

Comment puis-je utiliser des commentaires dans la renderméthode dans un composant React?

J'ai le composant suivant:

'use strict';
 var React = require('react'),
   Button = require('./button'),
   UnorderedList = require('./unordered-list');

class Dropdown extends React.Component{
  constructor(props) {
    super(props);
  }
  handleClick() {
    alert('I am click here');
  }

  render() {
    return (
      <div className="dropdown">
        // whenClicked is a property not an event, per se.
        <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
        <UnorderedList />
      </div>
    )
  }
}

module.exports = Dropdown;  

entrez la description de l'image ici

Mes commentaires s'affichent dans l'interface utilisateur.

Quelle serait la bonne approche pour appliquer des commentaires sur une ou plusieurs lignes dans une méthode de rendu d'un composant?


6
Bonne question avec une seule réponse. Ne vous laissez pas berner par 12 réponses! Ils parlent tous de la même chose:{/* JSX comment*/}
Jack Miller

Réponses:


295

Donc, dans la renderméthode, les commentaires sont autorisés, mais pour les utiliser dans JSX, vous devez les entourer d'accolades et utiliser des commentaires de style multiligne.

<div className="dropdown">
    {/* whenClicked is a property not an event, per se. */}
    <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button>
    <UnorderedList />
</div>

Vous pouvez en savoir plus sur le fonctionnement des commentaires dans JSX ici


1
Je ne sais pas pourquoi mais cela me donne toujours un sentiment de mauvais code ou quelque chose qui ne va pas dans le code. en d'autres termes, il semble que les commentaires ne s'ajustent pas dans mon code de cette manière. Je ne sais pas si j'ai utilisé des //commentaires de style double barre oblique
adi

2
Et quelque chose comme <div> </div> {/ * comment * /} crée une erreur. le commentaire doit être dans une nouvelle ligne.
Amir Shabani

49

Voici une autre approche qui vous permet d'utiliser //pour inclure des commentaires:

return (
  <div>
    <div>
      {
        // Your comment goes in here.
      }
    </div>
    {
      // Note that comments using this style must be wrapped in curly braces!
    }
  </div>
);

Le hic ici est que vous ne pouvez pas inclure un commentaire d'une ligne en utilisant cette approche. Par exemple, cela ne fonctionne pas:

{// your comment cannot be like this}

car le crochet fermant }est considéré comme faisant partie du commentaire et est donc ignoré, ce qui génère une erreur.


7
@LukeCarelsen Cela fonctionne en fait parce qu'il a placé le //entre crochets.
Martin Dawson

23

D'autre part, ce qui suit est un commentaire valide, tiré directement d'une application de travail:

render () {
    return <DeleteResourceButton
            //confirm
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

Apparemment, à l' intérieur des crochets angulaires d'un élément JSX, la //syntaxe est valide, mais le {/**/}. Les pauses suivantes:

render () {
    return <DeleteResourceButton
            {/*confirm*/}
            onDelete={this.onDelete.bind(this)}
            message="This file will be deleted from the server."
           />
}

Y a-t-il des documents à ce sujet? Je viens de le découvrir aussi.
Minh Nghĩa

13

Pour résumer, JSX ne prend pas en charge les commentaires, qu'ils soient de type html ou js:

<div>
    /* This will be rendered as text */
    // as well as this
    <!-- While this will cause compilation failure -->
</div>

et la seule façon d'ajouter des commentaires "dans" JSX est en fait de s'échapper dans JS et de commenter là-dedans:

<div>
    {/* This won't be rendered */}
    {// just be sure that your closing bracket is out of comment
    }
</div>

si vous ne voulez pas faire de bêtises comme

<div style={{display:'none'}}>
    actually, there are other stupid ways to add "comments"
    but cluttering your DOM is not a good idea
</div>

Enfin, si vous souhaitez créer un nœud de commentaire via React, vous devez être beaucoup plus sophistiqué, consultez cette réponse .


11

C'est ainsi.

Valide:

...
render() {

  return (
    <p>
       {/* This is a comment, one line */}

       {// This is a block 
        // yoohoo
        // ...
       }

       {/* This is a block 
         yoohoo
         ...
         */
       }
    </p>
  )

}
...

Invalide:

...
render() {

  return (
    <p>
       {// This is not a comment! oops! }

       {//
        Invalid comment
       //}
    </p>
  )

}
...


8

Outre les autres réponses, il est également possible d'utiliser des commentaires sur une seule ligne juste avant et après le début ou la fin du JSX. Voici un résumé complet:

Valide

(
  // this is a valid comment
  <div>
    ...
  </div>
  // this is also a valid comment
  /* this is also valid */
)

Si nous devions utiliser des commentaires dans la logique de rendu JSX:

(
  <div>
    {/* <h1>Valid comment</h1> */}
  </div>
)

Lors de la déclaration d'accessoires, des commentaires sur une seule ligne peuvent être utilisés:

(
  <div
    className="content" /* valid comment */
    onClick={() => {}} // valid comment
  >
    ...
  </div>
)

Invalide

Lorsque vous utilisez des commentaires sur une seule ligne ou sur plusieurs lignes dans le JSX sans les encapsuler { }, le commentaire sera rendu dans l'interface utilisateur:

(
  <div>
    // invalid comment, renders in the UI
  </div>
)

7
{ 
    // any valid js expression
}

Si vous vous demandez pourquoi ça marche? c'est parce que tout ce qui est entre accolades {} est une expression javascript,

donc c'est bien aussi:

{ /*
         yet another js expression
*/ }

{//} cela ne fonctionne pas, j'ai vérifié, pouvez-vous préciser, j'essaie de le commenter dans la fonction de rendu, cela ne fonctionne que s'il y a une nouvelle ligne après l'accolade et même cas pour l'accolade fermante (il devrait être sur la nouvelle ligne),
Irshad Babar


6

Syntaxe des commentaires JSX: vous pouvez utiliser

{/** 
  your comment 
  in multiple lines
  for documentation 
**/} 

ou

{/* 
  your comment 
  in multiple lines
*/} 

pour un commentaire sur plusieurs lignes. Et aussi,

{ 
  //your comment 
} 

pour un commentaire sur une seule ligne.

Remarque : la syntaxe:

{ //your comment } 

ne fonctionne pas. Vous devez taper des accolades dans les nouvelles lignes.

Les accolades sont utilisées pour distinguer JSX et JavaScript dans un composant React. À l'intérieur des accolades, nous utilisons la syntaxe des commentaires JavaScript.

Référence: cliquez ici


Êtes-vous sûr que la syntaxe des commentaires sur une seule ligne est valide? Votre référence ne le montre pas.
Tomáš Hübelbauer

Oui. Je suis assez sûr. Je n'ai pas trouvé de référence pour cela, mais je l'ai testé moi-même. De plus, comme je l'ai mentionné dans la réponse, nous pouvons utiliser la syntaxe de ligne unique javascript dans JSX en utilisant des accolades.
bannedFromAskingQuestions

6

Deux façons d'ajouter des commentaires dans React Native

1) // (Double Forward Slash) est utilisé pour commenter une seule ligne dans le code natif de réaction, mais il ne peut être utilisé qu'en dehors du bloc de rendu. Si vous souhaitez commenter dans le bloc de rendu où nous utilisons JSX, vous devez utiliser la 2ème méthode.

2) Si vous souhaitez commenter quelque chose dans JSX, vous devez utiliser des commentaires JavaScript à l'intérieur des accolades Curly comme {/ commentez ici /}. C'est un / * Block Comments * / normal, mais il doit être entouré d'accolades.

touches de raccourci pour / * Bloquer les commentaires * /:

Ctrl + / on Windows + Linux.
Cmd + / on macOS.

salut Ramesh R pouvez-vous vous assurer lorsque vous effectuez des modifications de code que vous ne gâchez pas l'indentation - comme ce stackoverflow.com/revisions/57358471/3 ? merci

6

Selon la documentation de React , vous pouvez écrire des commentaires dans JSX comme ceci:

Commentaire sur une ligne:

<div>
  {/* Comment goes here */}
  Hello, {name}!
</div>

Commentaires sur plusieurs lignes:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>

4

Les commentaires JavaScript dans JSX sont analysés en tant que texte et s'affichent dans votre application.

Vous ne pouvez pas simplement utiliser des commentaires HTML à l'intérieur de JSX car il les traite comme des nœuds DOM:

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

Les commentaires JSX pour les commentaires sur une seule ligne et sur plusieurs lignes suivent la convention

Commentaire sur une seule ligne:

{/* A JSX comment */}

Commentaires multilignes:

{/* 
  Multi
  line
  comment
*/}  
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.