Question

我的目标是在React中创建nxn tic tac toe游戏。现在，我有了import androidx.fragment.app.setFragmentResultListener类包装正方形。这是CSS：

board

在.board css中，我如何使此动态而不是3-例如，如果网格为4X4，那么我将不得不执行repeat（4,1fr）等...对于所有大小，它将如何通用？

Answer 1

更新

如果您特别想要一个React解决方案，我将为您here制作一个演示。

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const [gridSize, setGridSize] = useState(4);
  const boardRef = useRef(null);

  useEffect(() => {
    boardRef.current.style.setProperty("--grid-size", gridSize);
  }, [gridSize]);

  const createSquares = () => {
    let html = [];
    for (let i = 0; i < gridSize * gridSize; i++) {
      html.push(<div key={i} className="square"></div>);
    }
    return html;
  };

  function handleClick() {
    setGridSize(gridSize === 4 ? 3 : 4);
  }

  return (
    <div className="App">
      <button className="my-button" onClick={handleClick}>
        Toggle grid
      </button>

      <div ref={boardRef} className="board">
        {createSquares()}
      </div>
    </div>
  );
}

.board {
  --grid-size: 4;
  /* Start with 4x4 */
  display: grid;
  width: 25rem;
  height: 25rem;
  grid-template: repeat(var(--grid-size), 1fr) / repeat(var(--grid-size), 1fr);
}

.square {
  border: 1px solid black;
  display: grid;
  place-items: center;
  font-size: 40px;
}

.my-button {
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 0;
}

我会使用CSS custom property，您可以随时通过JavaScript进行设置。

const button = document.querySelector('.my-button');

const board = document.querySelector(".board");

button.addEventListener("click", handleClick);

function handleClick() {
  board.innerHTML = '';
  for (let i = 0; i < 9; i++) {
    board.innerHTML +='<div class="square"></div>';
  }
  board.style.setProperty("--grid-size", 3);
}

.board {
  --grid-size: 4; /* Start with 4x4 */
  display: grid;
  width: 25rem;
  height: 25rem;
  grid-template: repeat(var(--grid-size), 1fr) / repeat(var(--grid-size), 1fr);
}

.square {
  border: 1px solid black;
  display: grid;
  place-items: center;
  font-size: 40px;
}

.my-button {
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="board">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>  
</div>

<button class="my-button">
  Change to 3x3
</button>

jsFiddle

创建动态网格布局

1 个答案: