如何在React JS中为代码生成的不规则按钮组添加外框

我正在开发一个React项目，其中包含一个按钮网格。当选中一组按钮时，希望为这组按钮添加外框效果。

核心问题是网格大小可动态调整，按钮均通过代码生成而非硬编码，网上找到的方案都是针对硬编码场景，我作为前端和React新手不知道该怎么实现。

现有CSS代码 #

/* 方便修改网格大小，按钮总数为网格尺寸的平方 */
:root {
  --grid-size: 3;
}

/* 网格容器 */
.keenboard {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
}

/* 按钮样式 */
.keensquare {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(153, 153, 153);
  background-color: rgb(255,255,255);
}

现有React代码 #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

class KeenSquare extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toggled: false,
    };
  }

  handleClick = (event) => {
    this.setState({ toggled: !this.state.toggled });
  };

  render() {
    return <button className="keensquare" onClick={this.handleClick}></button>;
  }
}

class KeenBoard extends React.Component {
  render() {
    document.documentElement.style.setProperty("--grid-size", this.props.size);

    // 生成对应数量的按钮索引数组
    const board = Array.from(
      { length: this.props.size ** 2 },
      (_, index) => index
    );

    return (
      <div className="keenboard">
        {board.map((i) => (
          <KeenSquare key={i}></KeenSquare>
        ))}
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="gameboard" id="gameboard">
          <KeenBoard size={this.props.size} />
        </div>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game size={9}></Game>);

解决方案 #

核心思路 #

将选中状态统一移到父组件管理，通过计算选中按钮的边界坐标，用绝对定位的遮罩元素绘制外框，完全适配动态网格场景。

修改后完整代码 #

1. 更新CSS（新增外框样式）

:root {
  --grid-size: 3;
}

.keenboard {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  position: relative; /* 为外框遮罩提供定位基准 */
}

.keensquare {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(153, 153, 153);
  background-color: rgb(255,255,255);
  cursor: pointer;
}

.keensquare.toggled {
  background-color: #e0e0e0; /* 选中按钮的背景色，方便区分 */
}

.selection-outline {
  position: absolute;
  border: 2px solid #2196f3; /* 外框颜色 */
  pointer-events: none; /* 不干扰按钮点击 */
}

2. 更新React代码（统一管理选中状态+计算外框位置）

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

class KeenSquare extends React.Component {
  render() {
    const { index, isToggled, onClick } = this.props;
    return (
      <button
        className={`keensquare ${isToggled ? 'toggled' : ''}`}
        onClick={() => onClick(index)}
      ></button>
    );
  }
}

class KeenBoard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toggledIndices: new Set(), // 用Set存储选中的按钮索引
    };
  }

  componentDidMount() {
    document.documentElement.style.setProperty("--grid-size", this.props.size);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.size !== this.props.size) {
      document.documentElement.style.setProperty("--grid-size", this.props.size);
      this.setState({ toggledIndices: new Set() }); // 网格尺寸变化时清空选中状态
    }
  }

  handleSquareClick = (index) => {
    const { toggledIndices } = this.state;
    const newToggledIndices = new Set(toggledIndices);
    newToggledIndices.has(index) ? newToggledIndices.delete(index) : newToggledIndices.add(index);
    this.setState({ toggledIndices: newToggledIndices });
  };

  getSelectionOutlineStyle() {
    const { toggledIndices } = this.state;
    const { size } = this.props;
    if (toggledIndices.size === 0) return null;

    // 计算选中区域的边界行、列
    const indices = Array.from(toggledIndices);
    const minRow = Math.min(...indices.map(i => Math.floor(i / size)));
    const maxRow = Math.max(...indices.map(i => Math.floor(i / size)));
    const minCol = Math.min(...indices.map(i => i % size));
    const maxCol = Math.max(...indices.map(i => i % size));

    // 单个按钮的实际尺寸（宽60px + 左右边框各1px）
    const squareSize = 62;
    // 计算外框的位置和尺寸
    return {
      left: `${minCol * squareSize}px`,
      top: `${minRow * squareSize}px`,
      width: `${(maxCol - minCol + 1) * squareSize}px`,
      height: `${(maxRow - minRow + 1) * squareSize}px`,
    };
  }

  render() {
    const { size } = this.props;
    const { toggledIndices } = this.state;
    const board = Array.from(
      { length: size ** 2 },
      (_, index) => index
    );
    const outlineStyle = this.getSelectionOutlineStyle();

    return (
      <div className="keenboard">
        {board.map((i) => (
          <KeenSquare
            key={i}
            index={i}
            isToggled={toggledIndices.has(i)}
            onClick={this.handleSquareClick}
          />
        ))}
        {outlineStyle && (
          <div className="selection-outline" style={outlineStyle}></div>
        )}
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="gameboard" id="gameboard">
          <KeenBoard size={this.props.size} />
        </div>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game size={9}></Game>);

关键说明 #

1. 状态上移：将按钮的选中状态从子组件移到父组件KeenBoard统一管理，用Set存储选中索引，便于后续计算边界。
2. 边界计算：通过选中索引算出最小/最大行、列，结合单个按钮的实际尺寸（含边框），得到外框的位置和大小。
3. 遮罩外框：在网格容器内添加绝对定位的div，根据计算结果渲染外框，避免修改每个按钮的边框样式，完美适配动态网格。
4. 网格适配：当网格尺寸变化时，自动清空选中状态，防止索引混乱。

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