Javascript 如何使用变量每秒更改类名？

我试图每秒钟添加一个类名，并在那一秒钟内删除它（一直这样）。我正在使用useEffect挂钩

function App() {
  const [date , setDate] = useState('')
  let circle_boolean = 0;

  useEffect(() => {
    const interval = setInterval(() => {
      doThings()
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  function doThings() {
    setDate(moment().format('MMMM Do YYYY, h:mm:ss a')) ;
    circle_boolean=1;
    console.log("cirlce boolean :" + circle_boolean)
  }

  console.log("cirlce boolean outside:" + circle_boolean)


  return (
    <div className="App">
      <div className="bg">
        <div className={circle_boolean?"circle":""}/>  
        <div className="card">
          <p className="card-info">{date}</p>
        </div>
      </div>
    </div>
  );
}

函数应用程序（）{
const[date，setDate]=useState（“”）
设圆布尔=0；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
doThings（）
}, 1000);
return（）=>clearInterval（interval）；
}, []);
函数doThings（）{
setDate（矩（）格式（'MMMM-Do-YYYY，h:mm:ss-a'）；
圆布尔=1；
log（“cirlce boolean:+circle\u boolean）
}
log（“cirlce boolean outside:+circle_boolean”）
返回(
{date}
);
}

---

为此，我尝试使用一个变量“circle\u boolean”。如果circle_boolean为“1”，我希望随后添加和删除circle类。我该如何正确使用它？

既然国旗是您所在州的一部分，您需要将其置于州内。我还将在

useffect

回调中创建

doThings

，因为您只需要第一个，而不是后续调用组件函数创建的

请参见

***

注释：

const{useState，useffect}=React；
函数App（）{
const[date，setDate]=useState（“”）；
//***将国旗挂在州内
const[circleBoolean，setCircleBoolean]=useState（false）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
//***请注意，不要使用“日期”或
//‘circleBoolean’在这里，它们会不新鲜的。没关系
//使用setter函数。
setDate（矩（）格式（“MMMM-Do-YYYY，h:mm:ss-a”）；
//***使用`setCircleBoolean'的回调形式`
//因此，我们使用最新版本的标志，而不是
//陈腐的
setCircleBoolean（b=>！b）；
}, 1000);
return（）=>clearInterval（interval）；
}, []);
返回(
{date}
);
}
render（，document.getElementById（“根”））
.circle{
背景颜色：绿色；
宽度：10px；
高度：10px；
边界半径：10px；
}
useEffect的第二个属性是一个数组，它帮助我们控制组件上的状态。我的意思是，如果你想在状态改变时运行一个方法，你可以简单地用一个useffect钩子来检查这个状态的改变

function App() {
  const [date , setDate] = useState('')
  const [boolean, setBool] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      doThings()
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  // Magic happens in here:
  useEffect(() => {
    setTimeout(() => { setBool(false); }, 500); // to run after half a sec
  }, [bool]);

  function doThings() {
    setDate(moment().format('MMMM Do YYYY, h:mm:ss a')) ;
    setBool(true);
    console.log("cirlce boolean :" + bool)
  }
    
  return (
    <div className="App">
      <div className="bg">
        <div className={bool?"circle":""}/>  
        <div className="card">
          <p className="card-info">{date}</p>
        </div>
      </div>
    </div>
  );
}

函数应用程序（）{
const[date，setDate]=useState（“”）
const[boolean，setBool]=useState（false）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
doThings（）
}, 1000);
return（）=>clearInterval（interval）；
}, []);
//这里发生了奇迹：
useffect（（）=>{
setTimeout（（）=>{setBool（false）；}，500）；//在半秒后运行
}，[bool]）；
函数doThings（）{
setDate（矩（）格式（'MMMM-Do-YYYY，h:mm:ss-a'）；
setBool（真）；
log（“cirlce boolean:+bool”）
}
返回(
{date}
);
}

另一种更简单的方法是使用css动画。
我确保使用
useffect
并将第二个参数作为
circle\u boolean
的状态值传递（这需要处于状态，我已将其重命名为
circleBoolean
）。我的想法是让状态切换，并且每秒调用
useffect（）
，因为状态切换我们的
圈
类get的添加和删除

尝试以下解决方案：


完整代码：


const{useState，useffect}=React；
函数App（）{
const[date，setDate]=useState（“”）；
const[circleBoolean，setCircleBoolean]=useState（false）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
setCircleBoolean（！circleBoolean）；
setDate（矩（）格式（'MMMM-Do-YYYY，h:mm:ss-a'）；
}, 1000);
return（）=>{
间隔时间；
};
}，[circleBoolean]）；
返回(
{date}
);
}
render（，document.getElementById（“根”））
.App{
字体系列：无衬线；
文本对齐：居中；
}
.圆圈{
高度：20px；
宽度：20px；
背景：绿色；
背景：橙色；
}

将doThings添加到useffect的dependency数组中，比如useffect（（）=>{…}，[doThings]）@mahaveer jeevagan：试试我的解决方案，我刚刚想出了一个简单的逻辑来隐藏和删除类。我没有使用momemt（）库，但它的作用是：）这很有效。但是为什么我们必须使用{
${circleBoolean？“circle”：“}
}而不是{circleBoolean？“circle”：“}？当然了@T.J.Crowder:谢谢你带来这个……从现在开始我们将使用同样的方法，并编辑这个答案。。但是，您是否认为我为OP提供的方法有任何错误：）Thanks@mahaveerjeevagan：我正在使用ES6的模板字符串，这被称为字符串插值，我们作为Javascript开发人员已经采用了这一方法，因为这非常灵活。。经常使用的。。连接、创建HTML模板、从变量添加动态值以及其他许多用途……这非常有用：）很难从您的描述中说出来。如果您在
useffect
上向依赖项数组添加标志，那么我认为这不是最好的方法，因为这样会不断地取消和重新安排计时器。（看看我会怎么做。）@ImranRafiqRather-恐怕我不知道，但是FWIW，如果你在这里一直试图帮助别人，那么就继续倾听（有时它涉及倾听别人的声音）