What is this here?

Question

JavaScript

Such a thing from the site React "Introduction"

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {
    return (
      <Square 
        value={this.state.squares[i]} 
        onClick={() => this.handleClick(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')
);

Do I understand correctly that at the moment {this.renderSquare(0)}
the this values ​​of the props that are passed to the Square are lowered and become equal to the Board.

So:

return (
      <Square 
        value={this.state.squares[i]} 
        onClick={() => this.handleClick(i)}
      />
    );

Becomes:

return (
      <Square 
        value={Board.state.squares[0]} 
        onClick={() =>Board.handleClick(0)}
      />
    );

And then, when you click on the button , this is how the event is handled.

If not, then I don't understand how this is handled on click and this.handleClick (i) is called. It seems like this should otherwise be a button object, but it does not have such a method.

Answer 1

this will be equal to what was set for the function in which this line is called.
all. Other than that, it doesn't need to be complicated. Nothing goes down, nothing goes anywhere.
in line this is the render() function for the render function in this will be an instance of the Board. then renderSquare() is already called in which this is the same Board instance (everything is the same as for render in fact) no this is passed anywhere in the line , the desired value is taken from the squares array and 'X' or 'O' is passed without any board an arrow function is used in the line so that no matter how it will be called in the future, the value of this remains unchanged, as it was when this function was created (this from renderSquare)this.renderSquare(0)
read how they work.

Answer 2

I didn’t really understand your understanding (“great and mighty ...”), but the essence is this:
(I’ll try on my fingers, because I myself am not strong in theory)
not only value (cross or zero) is dropped into the props of the Square component, but also setState , wrapped in handleClick. That is, thus, by clicking on the button in Square, you actually change the state of the Board component (
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? 'X ' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
}); (right here)
and this. tells React to pass a handleClick from this component.