Làm cách nào tôi có thể sử dụng các nhận xét bên trong renderphương thức trong thành phần React?

Tôi có thành phần sau:

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

Nhận xét của tôi đang hiển thị trong giao diện người dùng.

Điều gì sẽ là cách tiếp cận đúng để áp dụng các nhận xét đơn và nhiều dòng trong một phương thức kết xuất của một thành phần?

Vì vậy, trong phạm vi các rendernhận xét phương thức được cho phép nhưng để sử dụng chúng trong JSX, bạn phải bọc chúng trong dấu ngoặc nhọn và sử dụng các nhận xét kiểu nhiều dòng.

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

Bạn có thể đọc thêm về cách các bình luận hoạt động trong JSX tại đây

Đây là một cách tiếp cận khác cho phép bạn sử dụng //để bao gồm các ý kiến:

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

Điều hấp dẫn ở đây là bạn không thể bao gồm một nhận xét một dòng bằng cách sử dụng phương pháp này. Ví dụ: điều này không hoạt động:

{// your comment cannot be like this}

bởi vì khung đóng }được coi là một phần của nhận xét và do đó bị bỏ qua, điều này sẽ gây ra lỗi.

Mặt khác, sau đây là một nhận xét hợp lệ, được lấy trực tiếp từ một ứng dụng đang hoạt động:

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

Một cách thận trọng , khi bên trong dấu ngoặc nhọn của phần tử JSX, //cú pháp hợp lệ, nhưng {/**/}không hợp lệ. Các giờ nghỉ sau:

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

Đây là cách làm.

Có hiệu lực:

...
render() {

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

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

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

}
...

Không hợp lệ:

...
render() {

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

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

}
...

Tóm lại, JSX không hỗ trợ các bình luận, giống như html hoặc js:

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

và cách duy nhất để thêm nhận xét "trong" JSX thực sự là thoát vào JS và nhận xét trong đó:

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

nếu bạn không muốn làm một số điều vô nghĩa như

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

Cuối cùng, nếu bạn muốn tạo một nút bình luận thông qua React, bạn phải đi nhiều người hâm mộ hơn, hãy xem câu trả lời này .

Bên cạnh các câu trả lời khác, bạn cũng có thể sử dụng các nhận xét dòng đơn ngay trước và sau khi JSX bắt đầu hoặc kết thúc. Dưới đây là một bản tóm tắt đầy đủ:

Có hiệu lực

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

Nếu chúng ta sử dụng các bình luận bên trong logic kết xuất JSX:

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

Khi khai báo đạo cụ, các dòng chú thích có thể được sử dụng:

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

không hợp lệ

Khi sử dụng các nhận xét một dòng hoặc nhiều dòng bên trong JSX mà không gói chúng vào { }, nhận xét sẽ được hiển thị cho UI:

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

Theo trang web chính thức. Đây là hai cách

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

Ví dụ thứ hai:

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

Đây là liên kết: https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

{ 
    // any valid js expression
}

Nếu bạn tự hỏi tại sao nó hoạt động? đó là bởi vì mọi thứ bên trong dấu ngoặc nhọn {} là một biểu thức javascript,

vì vậy điều này cũng tốt:

{ /*
         yet another js expression
*/ }

Nhận xét Cú pháp Cú pháp: Bạn có thể sử dụng

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

hoặc là

{/* 
  your comment 
  in multiple lines
*/} 

cho nhiều dòng bình luận. Và còn nữa,

{ 
  //your comment 
} 

cho nhận xét dòng đơn.

Lưu ý : Cú pháp:

{ //your comment } 

không hoạt động. Bạn cần gõ niềng răng trong dòng mới.

Các dấu ngoặc nhọn được sử dụng để phân biệt giữa JSX và JavaScript trong thành phần React. Bên trong dấu ngoặc nhọn, chúng tôi sử dụng cú pháp nhận xét JavaScript.

Tham khảo: bấm vào đây

Hai cách để thêm nhận xét trong React Native

1) // (Double Forward Slash) được sử dụng để chỉ nhận xét một dòng duy nhất trong mã gốc phản ứng nhưng nó chỉ có thể được sử dụng bên ngoài khối kết xuất. Nếu bạn muốn bình luận trong khối kết xuất nơi chúng tôi sử dụng JSX, bạn cần sử dụng phương thức thứ 2.

2) Nếu bạn muốn nhận xét một cái gì đó trong JSX, bạn cần sử dụng các nhận xét JavaScript bên trong các dấu ngoặc nhọn như {/ bình luận ở đây /}. Nó là một bình thường / * Chặn Nhận xét * /, nhưng cần được bọc trong các dấu ngoặc nhọn.

các phím tắt cho / * Chặn Nhận xét * /:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Nhận xét JavaScript trong JSX được phân tích cú pháp dưới dạng Văn bản và hiển thị trong ứng dụng của bạn.

Bạn không thể chỉ sử dụng các nhận xét HTML bên trong JSX vì nó coi chúng là các Nút DOM:

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

Nhận xét JSX cho các nhận xét dòng đơn và đa dòng theo quy ước

Nhận xét dòng đơn:

{/* A JSX comment */}

Nhận xét đa dòng:

{/* 
  Multi
  line
  comment
*/}  

Theo Tài liệu của React , bạn có thể viết bình luận trong JSX như vậy:

Nhận xét một dòng:

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

Nhận xét nhiều dòng:

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