ReactJS-댓글 사용법

ReactJS-댓글 사용법

---

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 주석 구문 : 사용할 수 있습니다

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

또는

{/* 
  your comment 
  in multiple lines
*/} 

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

{ 
  //your comment 
} 

한 줄 주석.

Note: The syntax:

{ //your comment } 

doesn't work. You need to type braces in new lines.

Curly braces are used to distinguish between JSX and JavaScript in a React component. Inside curly braces, we use JavaScript comment syntax.

Reference: click here

---

{ 
    // any valid js expression
}

If you wonder why does it work? it's because everything that's inside curly braces { } is a javascript expression,

so this is fine as well:

{ /*
         yet another js expression
*/ }

---

JavaScript comments in JSX get parsed as Text and show up in your app.

You can’t just use HTML comments inside of JSX because it treats them as DOM Nodes:

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

JSX comments for single line and multiline comments follows the convention

Single line comment:

{/* A JSX comment */}

Multiline comments:

{/* 
  Multi
  line
  comment
*/}  

---

Besides the other answers, it's also possible to use single line comments just before and after the JSX begines or ends. Here is a complete summary:

Valid

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

If we were to use comments inside the JSX rendering logic:

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

When declaring props single line comments can be used:

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

Invalid

When using single line or multiline comments inside the JSX without wrapping them in { }, the comment will be rendered to the UI:

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

---

According to React's Documentation, you can write comments in JSX like so:

One-line Comment:

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

Multi-line Comments:

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

---

Two Ways to Add Comments in React Native

1) // (Double Forward Slash) is used to comment only single line in react native code but it can only be used outside of the render block. If you want to comment in render block where we use JSX you need to use the 2nd method.

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

/ * Block Comments * / :의 단축키

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

참고 URL : https://stackoverflow.com/questions/30766441/reactjs-how-to-use-comments