renderReactコンポーネントのメソッド内でコメントを使用するにはどうすればよいですか？

次のコンポーネントがあります。

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

コメントがUIに表示されます。

コンポーネントのrenderメソッド内に単一行コメントと複数行コメントを適用する適切なアプローチは何でしょうか？

したがって、renderメソッド内ではコメントを使用できますが、JSX内で使用するには、それらを中括弧で囲み、複数行スタイルのコメントを使用する必要があります。

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

JSX でのコメントの動作について詳しくは、こちらをご覧ください。

ここにあなたが使用できるようにする別のアプローチがあります //コメントを含める。

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

ここでの問題は、このアプローチを使用して1行のコメントを含めることができないことです。たとえば、これは機能しません。

{// your comment cannot be like this}

閉じ括弧}はコメントの一部と見なされ、無視されるため、エラーがスローされます。

一方、以下は有効なコメントであり、動作中のアプリケーションから直接取得されます。

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

明らかに、JSX要素の山括弧の内側では、//構文は有効ですが、{/**/}は無効です。次の改行：

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

こうやって。

有効：

...
render() {

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

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

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

}
...

無効：

...
render() {

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

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

}
...

要約すると、JSXは、html風またはjs風のコメントをサポートしていません。

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

そして唯一の方法 JSX「の」コメントを追加するには、そこにJS、コメントの中に脱出すること実際にあります：

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

あなたがいくつかのナンセンスを作りたくない場合

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

最後に、Reactを介してコメントノードを作成したい場合は、もっと工夫する必要があります。この回答を確認してください。

他の回答に加えて、JSXの開始または終了の直前と直後の単一行コメントを使用することもできます。ここに完全な要約があります：

有効

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

JSXレンダリングロジック内でコメントを使用する場合：

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

小道具を宣言するときは、1行のコメントを使用できます。

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

無効

でラップせずにJSX内で単一行または複数行のコメントを使用する{ }と、コメントはUIにレンダリングされます。

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

公式サイトによると。これらは2つの方法です

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

2番目の例：

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

ここにリンクがあります：https : //reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

なぜそれが機能するのか疑問に思うなら？中括弧{}内にあるものはすべてJavaScript式であるためです。

これも問題ありません：

{ /*
         yet another js expression
*/ }

JSXコメント構文： 使用できます

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

または

{/* 
  your comment 
  in multiple lines
*/} 

複数行コメント。そしてまた、

{ 
  //your comment 
} 

1行コメント用。

注：構文：

{ //your comment } 

動作しません。新しい行に中括弧を入力する必要があります。

中括弧は、ReactコンポーネントでJSXとJavaScriptを区別するために使用されます。中括弧内では、JavaScriptコメント構文を使用します。

参照：ここをクリック

React Nativeでコメントを追加する2つの方法

1）//（ダブルフォワードスラッシュ）は、reactネイティブコードで1行だけコメントするために使用されますが、レンダーブロックの外でのみ使用できます。JSXを使用するレンダーブロックでコメントする場合は、2番目の方法を使用する必要があります。

2）JSXでコメントを付ける場合は、{/ コメントここ /}のように中括弧内でJavaScriptコメントを使用する必要があります。通常の/ *ブロックコメント* /ですが、中括弧で囲む必要があります。

/ *ブロックコメントのショートカットキー* /：

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

JSXのJavaScriptコメントはテキストとして解析され、アプリに表示されます。

JSX内でHTMLコメントを使用することはできません。HTMLコメントはDOMノードとして扱われるためです。

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

単一行および複数行コメントのJSXコメントは規則に従います

1行コメント：

{/* A JSX comment */}

複数行コメント：

{/* 
  Multi
  line
  comment
*/}  

Reactのドキュメントによると、次のようにJSXでコメントを書くことができます：

1行コメント：

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

複数行コメント：

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