ฉันจะใช้ความคิดเห็นภายใน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

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

ดังนั้นใน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."
           />
}

เห็นได้ชัดว่าเมื่ออยู่ในวงเล็บเหลี่ยมขององค์ประกอบ 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-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 คุณจะต้องไปไกลกว่านี้มากนักลองดูคำตอบนี้

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

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

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

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

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

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

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

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

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

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

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

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

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

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

{/* A JSX comment */}

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

{/* 
  Multi
  line
  comment
*/}  

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

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

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

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

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