Hoe kan ik opmerkingen gebruiken binnen de render-methode in een React-component?

Ik heb het volgende onderdeel:

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

Mijn opmerkingen worden weergegeven in de gebruikersinterface.

Wat zou de juiste aanpak zijn om enkele en meerdere regels toe te passen binnen een rendermethode van een component?

Antwoord 1, autoriteit 100%

Dus binnen de render-methode zijn opmerkingen toegestaan, maar om ze binnen JSX te gebruiken, moet je ze tussen accolades plaatsen en opmerkingen in meerdere regels gebruiken.

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

Je kunt hier

Antwoord 2, autoriteit 15%

Hier is een andere benadering waarmee u //kunt gebruiken om opmerkingen toe te voegen:

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

Het addertje onder het gras is dat je met deze aanpak geen commentaar van één regel kunt toevoegen. Dit werkt bijvoorbeeld niet:

{// your comment cannot be like this}

omdat het haakje sluiten }wordt beschouwd als onderdeel van de opmerking en dus wordt genegeerd, wat een fout oplevert.

Antwoord 3, autoriteit 7%

Aan de andere kant is het volgende een geldige opmerking, rechtstreeks overgenomen uit een werkende applicatie:

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

Als binnende punthaken van een JSX-element staat, is de syntaxis //blijkbaar geldig, maar de {/**/}ongeldig is. De volgende pauzes:

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

Antwoord 4, autoriteit 4%

Volgens de officiële site. Dit zijn de twee manieren

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

Tweede voorbeeld:

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

Hier is de link: https ://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx

Antwoord 5, autoriteit 4%

Naast de andere antwoorden, is het ook mogelijk om commentaar van één regel te gebruiken net voor en na het begin of einde van de JSX. Hier is een volledige samenvatting:

Geldig

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

Als we opmerkingen zouden gebruiken binnen de JSX-renderinglogica:

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

Bij het declareren van rekwisieten kunnen enkelregelige opmerkingen worden gebruikt:

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

Ongeldig

Bij gebruik van enkele of meerregelige opmerkingen binnen de JSX zonder ze in { }te plaatsen, wordt de opmerking weergegeven in de gebruikersinterface:

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

Antwoord 6, autoriteit 4%

Dit is hoe.

Geldig:

...
render() {
  return (
    <p>
       {/* This is a comment, one line */}
       {// This is a block 
        // yoohoo
        // ...
       }
       {/* This is a block 
         yoohoo
         ...
         */
       }
    </p>
  )
}
...

Ongeldig:

...
render() {
  return (
    <p>
       {// This is not a comment! oops! }
       {//
        Invalid comment
       //}
    </p>
  )
}
...

Antwoord 7, autoriteit 4%

Om samen te vatten, JSX ondersteunt geen opmerkingen, noch html-achtig noch js-achtig:

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

en de enige maniercommentaar toevoegen “in” JSX is eigenlijk ontsnappen naar JS en daar commentaar geven:

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

als je geen onzin wilt maken, zoals

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

Ten slotte, als je een comment nodewilt maken via React, moet je veel exclusiever worden, bekijk dit antwoord.

Antwoord 8, autoriteit 3%

Twee manieren om opmerkingen toe te voegen in React Native

1) // (Double Forward Slash) wordt gebruikt om alleen een enkele regel te becommentariëren in native react-code, maar het kan alleen buiten het renderblok worden gebruikt. Als je commentaar wilt geven in het renderblok waar we JSX gebruiken, moet je de 2e methode gebruiken.

2) Als je iets in JSX wilt becommentariëren, moet je JavaScript-commentaar binnen accolades gebruiken, zoals {/commentaar hier/}. Het is een normale /* Block Comments */, maar moet tussen accolades worden gewikkeld.

sneltoetsen voor /* Block Comments */:

Ctrl + / on Windows + Linux.

Cmd + / on macOS.

Antwoord 9, autoriteit 3%

{/*
   <Header />
   <Content />
   <MapList />
   <HelloWorld />
*/}

{ 
    // any valid js expression
}

{ /*
         yet another js expression
*/ }

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

{/* 
  your comment 
  in multiple lines
*/} 

{ 
  //your comment 
} 

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

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

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

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/}  

{false && <>
<div>
  Commented out.
  /* Anything goes. */
</div>
</>}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
  <div>
    before
    {false && <>
    <div>
      Commented out.
      /* Anything goes. */
    </div>
    <div>
      Also commented out.
      /* Anything goes. */
    </div>
    </>}
    after
  </div>
  ,
  document.getElementById('root')
);
</script>
</body>
</html>