Question

所以我真的是ReactJS的新手，自从我学习JS已有一段时间了。我正在使用Sublime 3 Editor，并将语法设置为Babel（javascript）。我可以通过npm run build获得第一个没有数字显示的面板。然后，我编辑它要求的两段代码，

    class Board extends React.Component {
     renderSquare(i) {
       return <Square value={i} />;
     }
   }
   Change Square’s render method to show that value by replacing {/* TODO */} with {this.props.value}:

   class Square extends React.Component {
     render() {
       return (
         <button className="square">
            {this.props.value}
          </button>
        );
      }
    }

...问题是我仍然得到空白板。应该显示为正方形数字。

这是我的代码...

    class Square extends React.Component {
      render() {
        return (
          <button className="square">
            {this.props.value}
          </button>
        );
      }
    }

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


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

我检查了代码，似乎对我来说也一样……有人告诉我我做错了吗？

我唯一注意到的是React.Component部分的颜色代码已关闭...

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

将代码放在代码段中时，您的代码可以正常工作，唯一的一件事就是使Babel能够转换以支持JSX。您可以检查日志以发现错误。

您还可以使用create-react-app自动为您设置适当的工具。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

不能获取数字以填写井字游戏示例

1 个答案: