Question

我正在尝试创建一个带有正方形的网格，随着每一秒的流逝，这些正方形以顺时针螺旋顺序从灰色变为黑色。我知道这个想法是切换每个 Square 组件的 css 类，但我不知道如何按螺旋顺序进行。相反，我设法得到了一个同时在灰色和黑色之间切换的正方形网格。理想情况下，我希望左上角的方块是第一个变黑的，其次是它的右邻居，最终以中心方块变黑结束。然后它们应该从黑色变回灰色，从中心“不螺旋”。

spiral example image

当前代码： https://codesandbox.io/s/cocky-merkle-o9ml8?file=/index.js

import ReactDOM from "react-dom";
import React, { useEffect } from "react";

import "./app.css";

const Square = props => {
  const className = props.on && "on";
  return <div className={`square ${className}`} />;
};

const Foo = (props) => {
  const size = props.size;
  const data = [];
  const [on, setOn] = React.useState(false);
  useEffect(() => {
    const interval = setInterval(() => {
      setOn(!on);
    }, 1000);
    return () => clearInterval(interval);
  }, [on, setOn]);
  for(let i = 0; i<size; i++){
    data.push(<Square on={on}/>)
  }
  return <div className="grid">{data}</div>;
};

ReactDOM.render(<Foo size={9} />, document.getElementById("root"));

反应 useEffect 和 setInterval 编码挑战

0 个答案: