Jak mogę używać komentarzy w rendermetodzie w komponencie React?

Mam następujący komponent:

'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;  

Moje komentarze pojawiają się w interfejsie użytkownika.

Jakie byłoby właściwe podejście do stosowania komentarzy jedno- i wieloliniowych w metodzie renderowania komponentu?

Tak więc w ramach rendermetody komentarze są dozwolone, ale aby użyć ich w JSX, musisz owinąć je w nawiasy klamrowe i używać komentarzy w stylu wieloliniowym.

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

Możesz przeczytać więcej o tym, jak komentarze działają w JSX tutaj

Oto inne podejście, które pozwala //na dołączanie komentarzy:

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

Problem polega na tym, że nie można dołączyć komentarza jednowierszowego przy użyciu tego podejścia. Na przykład to nie działa:

{// your comment cannot be like this}

ponieważ nawias zamykający }jest uważany za część komentarza i dlatego jest ignorowany, co powoduje błąd.

Z drugiej strony następujący komentarz jest poprawny, pobrany bezpośrednio z działającej aplikacji:

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

Podobnie, gdy wewnątrz nawiasów kątowych elementu JSX, //składnia jest poprawna, ale {/**/}jest niepoprawna. Następujące przerwy:

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

Oto jak.

Ważny:

...
render() {

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

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

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

}
...

Nieważny:

...
render() {

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

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

}
...

Podsumowując, JSX nie obsługuje komentarzy, takich jak HTML lub JS:

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

a jedynym sposobem dodawania komentarzy „w” JSX jest ucieczka do JS i komentowanie tam:

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

jeśli nie chcesz robić takich bzdur

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

Na koniec, jeśli chcesz utworzyć węzeł komentarzy za pomocą React, musisz być bardziej fanatyczny, sprawdź tę odpowiedź .

Oprócz innych odpowiedzi można także używać komentarzy jednowierszowych tuż przed i po rozpoczęciu lub zakończeniu JSX. Oto pełne podsumowanie:

Ważny

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

Gdybyśmy mieli używać komentarzy w logice renderowania JSX:

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

Podczas deklarowania rekwizytów można zastosować komentarze jednowierszowe:

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

Nieważny

Podczas korzystania z komentarzy JSX w jednym wierszu lub wierszu wielowierszowym bez ich zawijania { }, komentarz zostanie wyświetlony w interfejsie użytkownika:

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

Według oficjalnej strony. To są dwa sposoby

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

Drugi przykład:

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

Oto link: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Jeśli zastanawiasz się, dlaczego to działa? to dlatego, że wszystko, co znajduje się w nawiasach klamrowych {} jest wyrażeniem javascript,

więc to też dobrze:

{ /*
         yet another js expression
*/ }

JSX Komentarze Składnia: Możesz użyć

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

lub

{/* 
  your comment 
  in multiple lines
*/} 

komentarz do wielu wierszy. I również,

{ 
  //your comment 
} 

dla komentarza jednowierszowego.

Uwaga : składnia:

{ //your comment } 

nie działa Musisz wpisać nawiasy klamrowe w nowe linie.

Nawiasy klamrowe służą do rozróżnienia między JSX a JavaScript w komponencie React. W nawiasach klamrowych używamy składni komentarzy JavaScript.

Odniesienie: kliknij tutaj

Dwa sposoby dodawania komentarzy w React Native

1) // (Double Forward Slash) służy do komentowania tylko jednego wiersza w reagującym kodzie natywnym, ale można go używać tylko poza blokiem renderującym. Jeśli chcesz komentować w bloku renderowania, w którym używamy JSX, musisz użyć drugiej metody.

2) Jeśli chcesz komentować coś w JSX, musisz użyć komentarzy JavaScript w nawiasach klamrowych, takich jak {/ comment here /}. Jest to regularne / * Blokowanie komentarzy * /, ale musi być owinięte nawiasami klamrowymi.

Skróty klawiszowe do / * Zablokuj komentarze * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Komentarze JavaScript w JSX są analizowane jako Tekst i pojawiają się w Twojej aplikacji.

Nie możesz po prostu używać komentarzy HTML wewnątrz JSX, ponieważ traktuje je jako węzły DOM:

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

Komentarze JSX dla komentarzy jednowierszowych i wieloliniowych są zgodne z konwencją

Komentarz jednowierszowy:

{/* A JSX comment */}

Komentarze wielowierszowe:

{/* 
  Multi
  line
  comment
*/}  

Zgodnie z dokumentacją Reacta możesz pisać komentarze w JSX w następujący sposób:

Komentarz jednowierszowy:

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

Komentarze wieloliniowe:

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