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메소드 주석은 허용되지만 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>
);

여기서 중요한 것은이 방법을 사용하여 한 줄 주석을 포함 할 수 없다는 것입니다. 예를 들어, 작동하지 않습니다 :

{// your comment cannot be like this}

닫는 대괄호 }는 주석의 일부로 간주되므로 무시되므로 오류가 발생합니다.

반면에 다음은 유효한 애플리케이션에서 직접 가져온 유효한 주석입니다.

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

Apparantly 히 때 내부 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>
)

소품을 선언 할 때 한 줄 주석을 사용할 수 있습니다.

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

무효

로 묶지 않고 JSX 내에서 한 줄 또는 여러 줄 { }주석을 사용하면 주석이 UI에 렌더링됩니다.

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

공식 사이트에 따르면. 이들은 두 가지 방법입니다

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

두 번째 예 :

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

왜 작동하는지 궁금하다면? 중괄호 {} 안에있는 모든 것이 자바 스크립트 표현식이기 때문에

그래서 이것도 좋습니다 :

{ /*
         yet another js expression
*/ }

JSX 주석 구문 : 사용할 수 있습니다

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

또는

{/* 
  your comment 
  in multiple lines
*/} 

여러 줄 주석. 그리고 또한,

{ 
  //your comment 
} 

한 줄 주석.

참고 : 구문 :

{ //your comment } 

작동하지 않습니다. 새 줄에 중괄호를 입력해야합니다.

중괄호는 React 컴포넌트에서 JSX와 JavaScript를 구별하는 데 사용됩니다. 중괄호 안에는 JavaScript 주석 구문을 사용합니다.

참고 : 여기를 클릭

React Native에서 댓글을 추가하는 두 가지 방법

1) // (Double Forward Slash)는 반응 네이티브 코드에서 한 줄만 주석 처리하는 데 사용되지만 렌더 블록 외부에서만 사용할 수 있습니다. JSX를 사용하는 렌더 블록에 주석을 달려면 두 번째 방법을 사용해야합니다.

2) JSX에서 무언가를 주석 처리하려면 {/ comment here /} 와 같은 중괄호 안에 JavaScript 주석을 사용해야 합니다. 일반적인 / * Block Comments * /이지만 중괄호로 묶어야합니다.

/ * Block Comments * / :의 단축키

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

JSX의 JavaScript 주석은 텍스트로 구문 분석되어 앱에 표시됩니다.

JSX에서는 HTML 주석을 DOM 노드로 취급하므로 HTML 주석 만 사용할 수 없습니다.

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

단일 회선 및 다중 회선 주석에 대한 JSX 주석은 규칙을 따릅니다.

한 줄 주석 :

{/* A JSX comment */}

여러 줄 주석 :

{/* 
  Multi
  line
  comment
*/}  

React 's Documentation 에 따르면 JSX에 다음 과 같이 주석을 작성할 수 있습니다 .

한 줄 주석 :

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

여러 줄 주석 :

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