时间戳

首页 > 解决方案 > 每次组件重新渲染时如何生成一个随机数？

css - 每次组件重新渲染时如何生成一个随机数？

问题描述

我想使用 Less 变量为每秒添加和删除的有条件类生成一个随机数。这是reactjs文件的示例代码

function App() {
  const [date , setDate] = useState('')
  const [circleBoolean, setCircleBoolean] = useState(false);
  const [random_number, setRandom_number] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      doThings()
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  function doThings() {
    setCircleBoolean((prev)=>{
      return !prev});
    setDate(moment().format('MMMM Do YYYY, h:mm:ss a')) ;
    setRandom_number(Math.random() * 100);
    console.log("cirlce boolean :" + circleBoolean)
  }



  return (
    <div className="App">
      <div className="bg">
        <div style={{ top:`${random_number}%`, left:`${random_number}%` }}  className={circleBoolean ? "circle" : ""} />
        <div className="card">
          <p className="card-info">{date}</p>
        </div>
      </div>
    </div>
  );
}

这是来自css文件的示例代码

@color: blue;
@random: (round(`Math.random()`)) ;

.circle {
  position: absolute;
  border: solid 4px @color;
  border-radius: 50%;
 
  height: @random;
  width: 3em;
  background-color: @color;
  animation: circleSize 1s ease-in-out;
}

@keyframes circleSize {
  0% {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(1,1);
  }
  100%{
    transform: scale(0,0);
  }
}

随机数仅在第一次渲染期间生成，在后续重新渲染期间不会更改。我该怎么做？

标签： cssreactjsless

解决方案

我的建议是使用“css-in-js”方法。React 只会重新渲染更改的组件，并且您的 css 现在是静态的。如果您在 js 文件中定义样式并在每次应用程序的间隔运行时将随机数传递给该文件 - 您将获得重新渲染。

推荐阅读