Почему массив преобразовывается в объект при передаче его в качестве реквизита?

Question

Я пытаюсь сопоставить каждый элемент массива с его собственным div (для создания платы TicTacToe). Однако, когда я передаю его из реквизита, он распознается как объект. Вот пример:

Вот мой файл App.js:

class App extends Component {
  state = {
    gameBoard: Array(9),
  }

  render() {

    console.log(this.state.gameBoard)
    console.log(Array.isArray(this.state.gameBoard))

    return (
      <div className="App">
        <Board squares={this.state.gameBoard}/>
      </div>
    );
  }
}

export default App;

Вот мой файл компонента Board.js:

function Board(squares) {

    console.log(squares)
    console.log(Array.isArray(squares))

    return (
        null
    )

}

export default Board

Журналы консоли в App.js работают должным образом, давая:

// (массив)

"(9) [пусто × 9]"
"верно"

Однако консоль входит в Board.js и выдает:

// (объект)

"{squares: Array (9)}"
"false"

Мне любопытно, почему это происходит. Кроме того, если есть способ, как заставить мой компонент распознавать реквизиты как массив?

Answer 1

То, что получает Board компонент, является объектом props, и в вашем случае одно из его свойств будет squares. Итак, ваш Board код должен быть:

function Board(props) {

    console.log(props.squares)
    console.log(Array.isArray(props.squares))

    return (
        null
    )

}

export default Board

Answer 2

Параметр squares в дочернем компоненте Board является объектом prop.Если вы попытаетесь squares.squares, следует вернуть Array

function Board(squares) {
    // This is the prop object that react passes to a child component.
    console.log(squares);
    console.log(squares.squares)
    console.log(Array.isArray(squares.squares))

    return (
        null
    )

}

export default Board