ReactJS - จะใช้ความคิดเห็นได้อย่างไร?


191

ฉันจะใช้ความคิดเห็นภายในrenderวิธีการในองค์ประกอบทำปฏิกิริยา

ฉันมีองค์ประกอบดังต่อไปนี้:

'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

อะไรคือวิธีที่ถูกต้องในการใช้ความคิดเห็นแบบบรรทัดเดียวและหลายบรรทัดในวิธีการแสดงผลของส่วนประกอบ


3
เป็นคำถามที่ดีมีคำตอบเดียว อย่าหลงกลโดย 12 คำตอบ! พวกเขาทั้งหมดพูดเกี่ยวกับสิ่งเดียวกัน:{/* JSX comment*/}
Jack Miller

คำตอบ:


275

ดังนั้นใน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 ที่นี่


ฉันไม่รู้ว่าทำไม แต่มันให้ความรู้สึกของรหัสที่ไม่ดีหรือมีบางอย่างผิดปกติในรหัส ในคำอื่น ๆ ดูเหมือนว่าการแสดงความคิดเห็นไม่ได้ปรับในรหัสของฉันด้วยวิธีนี้ ฉันไม่แน่ใจว่าฉันถูกใช้ในการ//แสดงความคิดเห็นแบบเครื่องหมายทับสองครั้งหรือไม่
adi

2
และบางอย่างเช่น <div> </div> {/ * comment * /} สร้างข้อผิดพลาด ความคิดเห็นจะต้องอยู่ในบรรทัดใหม่
Amir Shabani

47

นี่คือวิธีการอื่นที่อนุญาตให้คุณใช้//เพื่อรวมความคิดเห็น:

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}

เพราะวงเล็บปิด}ถูกพิจารณาว่าเป็นส่วนหนึ่งของความคิดเห็นและจะถูกเพิกเฉยซึ่งทำให้เกิดข้อผิดพลาด


7
@LukeCarelsen มันใช้งานได้จริงเพราะเขา//อยู่ในเครื่องหมายวงเล็บเหลี่ยม
Martin Dawson

22

ในทางตรงกันข้ามต่อไปนี้เป็นความคิดเห็นที่ถูกต้องดึงโดยตรงจากแอปพลิเคชันที่ทำงาน:

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."
           />
}

11

นี่คือวิธี

ถูกต้อง:

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

}
...

11

เพื่อสรุป JSX ไม่สนับสนุนความคิดเห็นไม่ว่าจะเป็น html-like หรือ js-like:

<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 คุณจะต้องไปไกลกว่านี้มากนักลองดูคำตอบนี้


7

นอกจากคำตอบอื่น ๆ คุณยังสามารถใช้ความคิดเห็นบรรทัดเดียวก่อนและหลัง 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>
)



5
{ 
    // any valid js expression
}

หากคุณสงสัยว่าทำไมมันถึงได้ผล เป็นเพราะทุกอย่างที่อยู่ในเครื่องหมายปีกกา {} เป็นนิพจน์จาวาสคริปต์

ดังนั้นนี่เป็นเรื่องปกติเช่นกัน:

{ /*
         yet another js expression
*/ }

{//} สิ่งนี้ไม่ทำงานฉันได้ตรวจสอบคุณได้โปรดระบุฉันพยายามแสดงความคิดเห็นภายในฟังก์ชั่นการแสดงผลซึ่งจะทำงานเฉพาะในกรณีที่มีบรรทัดใหม่หลังจากวงเล็บปีกกาและกรณีเดียวกันสำหรับวงเล็บปีกกาปิด (ควรอยู่ในบรรทัดใหม่)
IB

5

ไวยากรณ์ความคิดเห็น JSX: คุณสามารถใช้

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

หรือ

{/* 
  your comment 
  in multiple lines
*/} 

สำหรับการแสดงความคิดเห็นหลายบรรทัด และนอกจากนี้ยังมี,

{ 
  //your comment 
} 

สำหรับความคิดเห็นบรรทัดเดียว

หมายเหตุ : ไวยากรณ์:

{ //your comment } 

ไม่ทำงาน คุณต้องพิมพ์เครื่องมือจัดฟันในบรรทัดใหม่

การจัดฟันแบบหยักใช้เพื่อแยกความแตกต่างระหว่าง JSX และ JavaScript ในส่วนประกอบ React ภายในวงเล็บปีกกาเราใช้ไวยากรณ์ความคิดเห็น JavaScript

อ้างอิง: คลิกที่นี่


คุณแน่ใจหรือว่าไวยากรณ์ความคิดเห็นบรรทัดเดียวใช้ได้หรือไม่ การอ้างอิงของคุณไม่แสดง
TomášHübelbauer

ใช่. ฉันค่อนข้างแน่ใจ. ฉันไม่พบข้อมูลอ้างอิง แต่ได้ทำการทดสอบด้วยตัวเอง นอกจากนี้ตามที่ฉันกล่าวถึงในคำตอบเราสามารถใช้ไวยากรณ์บรรทัดเดียว javascript ใน JSX โดยใช้เครื่องหมายปีกกา
yaksh

4

สองวิธีในการเพิ่มความคิดเห็นใน Native React

1) // (Double Forward Slash) ใช้เพื่อแสดงความคิดเห็นเพียงบรรทัดเดียวในโค้ดเนทีฟแบบตอบสนอง แต่สามารถใช้ได้เฉพาะนอกบล็อกการแสดงผล หากคุณต้องการแสดงความคิดเห็นในบล็อกการแสดงผลที่เราใช้ JSX คุณต้องใช้วิธีที่ 2

2) หากคุณต้องการแสดงความคิดเห็นบางอย่างใน JSX คุณต้องใช้ความคิดเห็น JavaScript ภายในวงเล็บปีกกาเช่น {/ ความคิดเห็นที่นี่ /} มันเป็นปกติ / * บล็อกความคิดเห็น * / แต่ต้องห่อด้วยเครื่องหมายปีกกา

ปุ่มลัดสำหรับ / * บล็อกความคิดเห็น * /:

Ctrl + / on Windows + Linux.
Cmd + / on macOS.

สวัสดี Ramesh R คุณสามารถตรวจสอบให้แน่ใจเมื่อคุณทำการแก้ไขโค้ดที่คุณไม่ได้ทำให้การเยื้อง - เช่นstackoverflow.com/revisions/57358471/3นี้หรือไม่ ขอบคุณ
Yvette - Reinstate Monica

3

ความคิดเห็น JavaScript ใน JSX จะถูกแยกวิเคราะห์เป็นข้อความและแสดงในแอปของคุณ

คุณไม่สามารถใช้ความคิดเห็น HTML ที่อยู่ภายใน JSX เพราะถือว่าเป็นความคิดเห็นของ DOM:

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

ความคิดเห็น JSX สำหรับบรรทัดเดียวและความคิดเห็นหลายบรรทัดเป็นไปตามการประชุม

ความคิดเห็นบรรทัดเดียว:

{/* A JSX comment */}

ความคิดเห็นหลายบรรทัด:

{/* 
  Multi
  line
  comment
*/}  

3

ตามเอกสารของ Reactคุณสามารถเขียนความคิดเห็นในJSXดังนี้:

ความคิดเห็นหนึ่งบรรทัด:

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

ความคิดเห็นหลายบรรทัด:

<div>
  {/* It also works 
  for multi-line comments. */}
  Hello, {name}! 
</div>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.