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;  

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?

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

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.

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."
           />
}

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 .

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>
  )

}
...

Selon le site officiel. Ce sont les deux façons

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

Deuxième exemple:

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

Voici le lien: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

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>
)

{ 
    // 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
*/ }

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

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.

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>

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
*/}