Javascript 使用ES2015解决阵列映射问题 我是在做教程的时候做反应拖放，遇到了一些代码，这给了我一些困惑。导致混淆的组件创建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数组是有效的。您可以在中的文档中看到这一点。下面重复的文档中的示例代码

请注意，因为，

listItems

const将是一个数组

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

函数编号列表（道具）{
常量数=道具数；
const listItems=numbers.map（（number）=>
);
返回(

{listItems}

);
}

React中的元素可以有一个或多个子元素。这些子元素可以作为单个元素提供，也可以作为元素数组提供。

{squares}

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