无可用数组时，如何在React中创建可复用多元素（井字棋场景）

嘿，这个问题我之前开发类似小游戏时也碰到过！完全不用手动写9个重复的<li>元素，我们可以动态生成一个长度为9的数组来实现组件复用，这在React里是非常常见的技巧，下面给你几种实用的方案：

方法1：用Array.from()生成可遍历数组 #

Array.from()可以根据指定长度生成一个数组，同时我们还能拿到每个元素的索引，刚好可以作为方块的唯一标识（key）：

import React from 'react';

const Square = (props) => {
  return <li className="square" {...props}></li>;
};

const Board = () => {
  // 生成包含0-8的数组，每个元素对应一个方块的索引
  const squaresArray = Array.from({ length: 9 }, (_, idx) => idx);

  return (
    <ul className="squares">
      {squaresArray.map((squareIndex) => (
        // 用索引作为key，确保React能正确识别每个组件
        <Square key={squareIndex} index={squareIndex} />
      ))}
    </ul>
  );
};

export default Board;

方法2：用Array(9).fill()快速生成数组 #

如果不需要索引值，只想快速生成一个长度为9的可遍历数组，fill()方法会更简洁：

const Board = () => {
  // 填充null让空数组变成可遍历的（Array(9)本身是未初始化的空数组，map不会遍历它）
  const squaresArray = Array(9).fill(null);

  return (
    <ul className="squares">
      {squaresArray.map((_, idx) => (
        <Square key={idx} />
      ))}
    </ul>
  );
};

扩展：结合游戏状态管理 #

其实这个生成的数组还能直接用来存储游戏状态（比如每个方块的X/O值），一举两得！比如加入点击逻辑：

import React, { useState } from 'react';

const Square = (props) => {
  return <li className="square" onClick={props.onClick}>{props.children}</li>;
};

const Board = () => {
  // 初始化状态为9个null，代表空方块
  const [boardState, setBoardState] = useState(Array(9).fill(null));

  const handleSquareClick = (index) => {
    // 跳过已填充的方块
    if (boardState[index]) return;
    // 更新状态，这里简单设置为X，你可以扩展成轮流下X/O的逻辑
    const newBoardState = [...boardState];
    newBoardState[index] = 'X';
    setBoardState(newBoardState);
  };

  return (
    <ul className="squares">
      {boardState.map((value, idx) => (
        <Square 
          key={idx} 
          onClick={() => handleSquareClick(idx)}
        >
          {value} {/* 渲染X/O或空 */}
        </Square>
      ))}
    </ul>
  );
};

export default Board;

这样既解决了组件复用的问题，也为后续实现完整的井字棋逻辑做好了准备～

内容的提问来源于stack exchange，提问作者Code Eagle