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

如何解决每次组件重新渲染时如何生成随机数？

我想使用 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);
  }
}

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

解决方法

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