javascript - 为什么这个注释在 Javascript/React 代码中作为参数传递？

Question

我正在处理 this React Tutorial更具体地说，使用下面这个 Code Pen 中的简单代码.

我在结束标记的其中一行中添加了注释(HERE IS THE COMMENT)，如您所见:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      > // HERE IS THE COMMENT
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

事实证明，这个注释 实际上修改了传递给 Square 组件的参数。如果没有注释，代码会呈现一个 3x3 的网格，里面什么也没有，但是有了注释，注释中的任何内容都会呈现在方 block 中(在本例中，“HERE IS THE COMMENT”)

这是为什么？

Answer 1

那不是 jsx 注释，但尝试将 //HERE IS THE COMMENT 变成真正的 React 注释

{/* 评论 */>