在基于状态更改的延迟之后，如何将类添加到div

Question

我正在寻找类似的东西

<div className={`${next? setTimeout(() => 'shorten', 500)  : ''}`}></div>

当next变为true时，在500ms 后添加"缩短"类

Answer 1

我认为useEffect将是正确的方法…

export default function App() {
const [cls, setCls] = useState("");
useEffect(() => {
if(!next) return;
let timeout = setTimeout(() => setCls("shorten"), 500);
return () => clearTimeout(timeout);
}, [next]);
return (
<div className={cls}>
</div>
);
}

以下是工作片段：

const {useEffect, useState} = React;
const App = () => {
const [cls, setCls] = useState("");
const [next, setNext] = useState(false);

useEffect(() => {
if (!next) return;
let timeout = setTimeout(() => setCls("shorten"), 500);
return () => clearTimeout(timeout);
}, [next]);
const resetClass = () => {
setCls("");
setNext(false);
};
return (
<div className="main">
<h3>Add class with delay</h3>
<div className={cls}>THIS DIV CHANGES CLASS</div>
<hr />
<button onClick={() => setNext(true)}>
Click to change "next" variable
</button>
<button onClick={() => resetClass()}>Clear Class</button>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

.shorten {
background: red;
}
.main div{
border:1px solid #cccccc;
border-radius:3px;
padding:15px;
display:inline-block;
}
.main button{
background:#eaeaea;
border:1px solid #cccccc;
margin-right:15px;
padding:5px;
border-radius:3px;
cursor:pointer;
}
.main button:hover{
background:#f1f1f1;
}
.main button:active{
background:#f5f5f5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您可以这样使用。

添加类似于此的状态

const [myclass, setMyclass] = useState('');
//then define a function
function myFunction() {
setTimeout(()=> setMyclass('shorten') , 500)
}

作为回报，stmt

{ if(next) myFunction;}
<div className={myClass}></div>

Answer 3

这可能是实现所需目标的一种可能的解决方案：

代码段

const {useState} = React;
const SomeComp = () => {
const [next, setNext] = useState(false);
const [delayedFlag, setDelayedFlag] = useState(false);
return (
<div>
<div class={next ? 'redBg' : 'cyanBg'}>
Some Text
</div>
<div class={delayedFlag ? 'redBg' : 'cyanBg'}>
Some Text with delayed update
</div>
<button
onClick={() => setNext(prev => (!prev))}
>
Flip Color
</button>
<button onClick={
() => setTimeout(() => setDelayedFlag(prev => (!prev)), 500)
}>
Delayed Flip
</button>
<button
onClick={() => {
setNext(prev => (!prev));
setTimeout(
() => setDelayedFlag(prev => (!prev)),
750
);
}}
>
Flip Both Texts
</button>
</div>
);
};
ReactDOM.render(
<div>
DEMO
<SomeComp />
</div>,
document.getElementById('reactdiv')
);

.redBg { background-color: red; }
.cyanBg { background-color: cyan; }

<div id='reactdiv' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

解释

• 用useState声明两个标志，即next和delayedFlag
• 两个按钮可以翻转这些旗帜
• 在delayedFlag上，按钮onClick将设置延迟500ms
• 因此，这两个文本块的样式变化不同。delayedFlag受控文本的样式更改存在可观察到的延迟

编辑

添加了第三个按钮来翻转两个文本，但一个是即时的，另一个是750毫秒的延迟。