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

事实证明，此 comment 实际上修改了传递给Square组件的参数。没有注释，代码将渲染一个3x3的网格，内部没有任何内容，但是带有注释，注释中的任何内容都将呈现在正方形中（在本例中为“ HERE IS THE COMMENT”）

那是为什么？

Answer 1

这不是jsx注释，但请尝试将// HERE IS THE COMMENT变成真正的反应注释

{/* COMMENT */}

Answer 2

这是因为此语法既不是字符串也不是HTML。众所周知，它是JSX，它是JavaScript的扩展。因此，当您尝试进行评论时，将其视为此处的文本：

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

这与这样做没有什么不同

<button
        className="square"
        onClick={() => this.setState({value: 'X'})}
> 
        SOME TEXT HERE
        {this.state.value}
</button>

如您所见，

React渲染为文本。但它可以在HTML部分中使用：

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

因此，如果您不想将注释作为文本呈现到DOM，则将使用JSX的优点之一，即Javascript表达式。当您要使用这样的表达式时，应使用花括号。所以：

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

Answer 3

通过VS代码的方式（谢谢，伙计们！），您可以用热键（cmd /）注释掉反应，并且IDE知道何时添加//注释，何时添加{/ *注释* /}

基本上，在JSX内，您应该始终使用{/ * comment /}，但有时当已经使用了一对大括号时/ comment * /也可以。

Answer 4

React JSX使用与JavaScript（和HTML）不同的注释语法。

Game组件使用正确的JSX注释（{/* status */}和{/* TODO */}）：

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>
    );
  }
}

JSX在概念上类似于HTML，因此放在标签之间的所有内容都将呈现到页面上。

在这种情况下，您要在// HERE IS THE COMMENT组件的<button>函数的render函数的Square标签内添加文本（Square）， <p>// HERE IS THE COMMENT</p>的每个实例。

一个简化版本，向您显示正在发生的事情（HTML）：

.jsx

我个人使用Atom中的language-babel软件包，并在包含JSX的所有文件中使用if split != "" { for i := 0; i < len(split); i++ { for j := 0; j < len(split); j += 0 { splits := []byte(split) if splits[i] == ' ' { result := split[i] - split[j] for k := 0; k <= i; k++ { fitting := make([]byte, result) fitting[k] = splits[k] fmt.Println(fitting[k]) if k > i-1 { fittings := string(fitting[:]) word := []string{} words := append(word, fittings) fmt.Println(split, words) } } } } } } return Strings(split)扩展名。 Babel使用键盘快捷键为我突出显示语法并正确添加注释。

为什么此注释在Javascript / React代码中作为参数传递？

4 个答案: