问题描述
我想使用 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>
);
}
@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 文件中定义样式,并在每次应用间隔运行时将随机数传递给该文件 - 您将获得重新渲染。