ReactJS - jak używać komentarzy

Question

Nie możesz użyć komentarzy w metodzie render 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 są wyświetlane w interfejsie użytkownika.

Jaki byłby właściwy sposób obsługi komentarzy?

UPDATE:

Dzięki limelights to działało:

{/* whenClicked is a property not an event, per se. */} 

Answer 1

Więc wewnątrz tynku metodą komentarze są dozwolone, ale w celu wykorzystania ich w JSX trzeba zawinąć je w nawiasach i używać wielo komentarze w stylu linii.

<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żna przeczytać więcej na temat pracy Komentarze w JSX here

Answer 2

Oto inne podejście, które pozwala na użycie // zawierać komentarze:

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

Połów o to, że nie mogą zawierać jednoliniowy komentarz wykorzystujący to podejście. Na przykład, to nie działa:

{// your comment cannot be like this} 

ponieważ nawias zamykający } jest uważany za część komentarza, a tym samym jest ignorowany, który zgłasza błąd.

Answer 3

Oto jak to zrobić.

Ważny:

... 
render() { 

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

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

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

} 
... 

Nieprawidłowy:

... 
render() { 

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

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

} 
... 

Answer 4

JavaScript komentarze w JSX się analizowany jako tekst i pokazać się w swojej aplikacji.

Nie można 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 pojedynczej linii i multilinii komentarzach następująco konwencję

Pojedyncza linia komentarz:

{/* A JSX comment */} 

wielowierszowe komentarze:

{/* 
    Multi 
    line 
    comment 
*/} 

Answer 5

Z drugiej strony, jest po poprawnym komentarzem, wyciągnął bezpośrednio z aplikacji robocza:

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

Podobno, gdy wewnątrz wsporniki kątowe elementu JSX składnia // jest ważny, ale {/**/} jest nieprawidłowy. Następujące przerwy:

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