ReactJS - как использовать комментарии

Question

ReactJS - как использовать комментарии

вы не можете использовать комментарии внутри render метод в компоненте React?

у меня есть следующий компонент:

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

enter image description here

мои комментарии отображаются в пользовательском интерфейсе.

каков был бы правильный способ обработки комментариев?

обновление:

благодаря "центром внимания" это работает:

   {/* whenClicked is a property not an event, per se. */}

1090 6

reactjs

6 ответов:

Comments

Ничего не найдено.

Henrik Andersson · Accepted Answer · 2018-06-04 02:04:21

внутри 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 здесь

anandharshan · Accepted Answer · 2017-01-03 02:23:44

вот еще один подход, который позволяет использовать // включить комментарии:
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}
потому что закрывающая скобка } считается частью комментария и, таким образом, игнорируется, что вызывает ошибку.

Mehdi Raash · Accepted Answer · 2017-04-29 18:52:19

вот как.

действующий:

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

}
...

papiro · Accepted Answer · 2018-02-15 06:11:42

С другой стороны, Ниже приведен допустимый комментарий, вытащенный непосредственно из рабочего приложения:
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."
           />
}

Venkatesh Manohar · Accepted Answer · 2018-01-28 07:56:33

комментарии JavaScript в JSX анализируются как текст и отображаются в вашем приложении.

вы не можете просто использовать HTML-комментарии внутри JSX, потому что он рассматривает их как узлы DOM:
render() {
  return (
    <div>
      
    </div>
  )
}
комментарии JSX для однострочных и многострочных комментариев следуют конвенции

однострочный комментарий:
{/* A JSX comment */}
многострочные комментарии:
{/* 
  Multi
  line
  comment
*/}

Bar Horing · Accepted Answer · 2018-08-06 22:47:05

{ 
    // any valid js expression
}
Если вам интересно, почему это работает? это потому, что все, что находится внутри фигурных скобок { } является выражением javascript,

Так что это тоже хорошо:
{ /*
         yet another js expression
*/ }