Что здесь является this?

Question

[Tdvist]

Такая штука из оф сайта React "Введение"

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

Правильно ли я понимаю, что в момент {this.renderSquare(0)}
значения this пропсов, которые передаются в Square, опускаются и становятся равны Board.

Поэтому:

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

Становится:

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

И потом, при клике на button, так происходит обработка события.

Если нет, то я не понимаю, как при клике обрабатывается this и вызывается this.handleClick(i) . Вроде как this иначе должен быть объект button, а у него нет такого метода.

Comments

[Tdvist]

Очень криво наверно описал, но надеюсь суть понятна.

Answer 1

[Robur]

this будет равен тому что был установлен для функции в которой эта строка вызывается.

все. помимо этого не надо усложнять. Ничего никуда не опускается, ничего никуда не подставляется.

в строке this.renderSquare(0) эта функция render() для функции render в this будет экземпляр Board.
дальше уже вызывается renderSquare() в которой this - тот же самый экземпляр Board (все как и для render по сути)

в строке value={this.state.squares[i]} никакой this никуда не передается, из массива squares берется нужное значение и передается 'X' или 'O' без всяких board

в строке onClick={() => this.handleClick(i)}
используется стрелочная функция, для того чтобы вне зависимости от того как она будет вызвана в будущем, значение this осталось неизменным, таким каким оно было когда эта функция создавалась (this из renderSquare)

почитайте как они работают.

Comments

[8XL]

Эм...но...но есть же официальная документация в которой

Компонент выше по иерархии (FilterableProductTable) будет передавать модель данных через пропсы.

Получается, что все же передается.

В общем почитайте, как оно работает Философия React

[Robur]

8XL, я вообще не понял при чем тут философия react, если речь идет о том как this работает в JS.
И что у вас там "все же передается" тоже не уловил.

[8XL]

Так вопрос стоит не просто в классах Js, а именно в классовых компонентах React(только не спрашивайте разницу).
А передается метод родительского компонента в компонент дочерний(как и состояние).
Я все же рекомендую освежить знания.

[Robur]

8XL, Спасибо за рекомендацию. А вам я рекомендую перечитать вопрос, мой ответ и постараться понять о чем шла речь на самом деле. И поменьше попыток показаться умнее, это чаще всего приводит к обратному эффекту.

Answer 2

[8XL]

Я не очень понял твоё понимание("великий и могучий..."), но суть такова:
(попытаюсь на пальцах, ибо сам в теории не силен)
в пропсы компонента Square опускается не только вэлью(крестик или нолик), но и setState, обернутый в handleClick. То есть, таким образом, кликая по баттону в Square, фактически ты меняешь состояние компонента Board (

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

А this. говорит реакту, что нужно передать handleClick из этого компонента.