javascript - ES2015 的 React 数组映射问题

Question

我正在编写 React 拖放教程，遇到了一些让我有些困惑的代码。造成困惑的组件创建了一个 8x8 的棋盘，并将其显示在屏幕上。这是组件的主要部分:

export default class Board extends Component {
  renderSquare(i) {
    const x = i % 8;
    const y = Math.floor(i / 8);
    const black = (x + y) % 2 === 1;

    const [knightX, knightY] = this.props.knightPosition;
    const piece = (x === knightX && y === knightY) ?
      <Knight /> :
      null;

    return (
      <div key={i}
           style={{ width: '12.5%', height: '12.5%' }}>
        <Square black={black}>
          {piece}
        </Square>
      </div>
    );
  }

  render() {
    const squares = [];
    for (let i = 0; i < 64; i++) {
      squares.push(this.renderSquare(i));
    }

    return (
      <div style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexWrap: 'wrap'
      }}>
        {squares}
      </div>
    );
  }

除了数组如何遍历以及如何将 JSX 元素显示到屏幕之外，我几乎理解所有的代码。令我困惑的代码是这样的:

    render() {
    const squares = [];
    for (let i = 0; i < 64; i++) {
      squares.push(this.renderSquare(i));
    }

    return (
      <div style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexWrap: 'wrap'
      }}>
        {squares}
      </div>
    );
  }
}

我不明白的部分是在 return 语句中，其中方 block 数组在单括号内被调用。当我引用时:

{squares}

我假设它只会喷出某种错误，因为正方形只是一个数组，并没有被映射或类似的东西。使用上面的代码有效，但我不知道为什么。我说的有道理吗？我感谢任何反馈。谢谢。

Answer 1

JSX 数组是有效的。您可以在 Embedding map() in JSX example 的文档中看到这一点.下面重复的文档中的示例代码。

注意自 the map function returns an array , listItems 常量将是一个数组。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}