Question

我正在为React Drag and Drop做教程，并且遇到了一些让我感到困惑的代码。导致混淆的组件创建一个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语句中，square数组在单括号内被调用。当我参考：

{squares}

我认为它只是会发出某种错误，因为正方形只是一个数组，而不是通过这种方式进行映射。使用上面的代码工作，但我不知道为什么。我所说的是否有意义？我感谢任何反馈。谢谢。

Answer 1

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

请注意，由于the map function returns an array，listItems const将是一个数组。

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

ES2015的React阵列映射问题

1 个答案: