blocks|key|4191587|text|你在渲染中做speechSynthesis吗？在切换按钮之后，您应该调用执行speechSynthesis的函数。就UX而言，我建议你在做一项可能需要一些时间才能完成的任务时，显示一个加载指示器。此外，您还可以禁用该按钮，直到speechSynthesis完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4191588|toggleSpeak+=+()+=>+{
++if(!this.state.doingSpeechSynthesis)+{
++++this.setState(
++++++{buttonOn:+!this.state.buttonOn,+doingSpeechSynthesis:+true},+
++++++()+=>+speechSynthesis(args,+this.setState{doingSpeechSynthesis:+false}));
+++}
}|code-block|syntax|javascript|4191589|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Are you doing the speechSynthesis in render?
You should call the function that does the speechSynthesis after toggling the button.
As far as UX is concerned, I would recommend that you show a loading indicator while you are doing a task that might take some time to finish. Also, you could disable the button until the speechSynthesis is finished. 

<pre><code>toggleSpeak = () =&gt; {
 if(!this.state.doingSpeechSynthesis) {
 this.setState(
 {buttonOn: !this.state.buttonOn, doingSpeechSynthesis: true}, 
 () =&gt; speechSynthesis(args, this.setState{doingSpeechSynthesis: false}));
 }
}
</code></pre>

blocks|key|4191605|text|this.setState({})函数确实是异步的，因此考虑到触发器中包含的所有内容，在很短的几毫秒内，您所声称的可能是真的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4191606|toggleSpeak+=+()+=>+{
+++this.setState({buttonOn:+!this.state.buttonOn});
}|code-block|syntax|javascript|4191607|你所说的明显的延迟应该是不可察觉的。我会认为延迟是从其他地方强加的。(假设您需要在this.setState({})之前运行一些其他同步代码。一定要向我们展示更多相关的代码，这样我们才能更好地掌握正在发生的事情。|4191608|entityMap^0|0|H|0|0|15|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<code>this.setState({})</code> function is indeed asynchronous so what you are claiming is likely to be true for a very short number of milliseconds considering that all you have in the trigger is 

<pre><code>toggleSpeak = () =&gt; {
 this.setState({buttonOn: !this.state.buttonOn});
}
</code></pre>

The noticeable delay you speak of should be unnoticeable. I would think that the delay is being imposed from elsewhere. (say you require some other synchronous code to run before <code>this.setState({})</code>. Do show us more of the relevant code so that we can get better grasp of what's happening.

blocks|key|4191693|text|我不确定这是否是"react“方式，但我想出了一个可行的解决方案。我拆分了我传递的属性，以便从按钮切换中打开播放器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4191694|state+=+{
+++buttonOn:+false,
+++play:+false
}|code-block|syntax|javascript|4191695|按钮属性与上面相同，但会随着buttonOn状态的变化而变化。|4191696|ChildComponent属性：...play={this.state.play}|4191697|然后，在按钮切换事件中，我等待半秒后才更改播放状态。这是为了让按钮立即更新它的样式，然后所有播放器的东西都可以在一个滴答之后运行。|4191698|++togglePlay+=+(newValue)+=>+{
++++this.setState({play:+newValue});+
++}


++toggleSpeak+=+(e)+=>+{
++++let+newValue+=+!this.state.buttonOn;
++++this.setState({buttonOn:+newValue});
++++if+(this.state.play+!=+newValue)+{
++++++setTimeout(function()+{+
+++++++++this.togglePlay(newValue);
++++++}.bind(this),+500);
++++}|4191699|当然，在卸载时清除超时函数：|4191700|++componentWillUnmount()+{
+++clearTimeout(this.togglePlay);
++}|4191701|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I'm not sure if this is the "react" way of doing things, but I came up with a solution that works. I split up the property I pass to turn on the player from the button toggle.

<pre><code>state = {
 buttonOn: false,
 play: false
}
</code></pre>

Button attributes are the same as above, changing with the buttonOn state.

ChildComponent property:
 ... play={this.state.play}

Then, on the button toggle event I wait a half a sec before I change the play state. This is so the button will update it's style right away, and then all the player stuff can run after a tick.

<pre><code> togglePlay = (newValue) =&gt; {
 this.setState({play: newValue}); 
 }


 toggleSpeak = (e) =&gt; {
 let newValue = !this.state.buttonOn;
 this.setState({buttonOn: newValue});
 if (this.state.play != newValue) {
 setTimeout(function() { 
 this.togglePlay(newValue);
 }.bind(this), 500);
 }
</code></pre>

Then of course clear the timeout function on dismount:

<pre><code> componentWillUnmount() {
 clearTimeout(this.togglePlay);
 }
</code></pre>

I have a toggle button in a react component:

<pre><code>toggleSpeak = () =&gt; {
 this.setState({buttonOn: !this.state.buttonOn});
}
</code></pre>

And the button changes its style depending on its state:

<pre><code> &lt;img key="headphones" className={audioclass} src={this.state.buttonOn ? white : black} onClick={this.toggleSpeak}/&gt;
</code></pre>

This also triggers some stuff in a child component:

<pre><code>play={this.state.buttonOn}
</code></pre>

This triggers some speechSynthesis playback, which sometimes takes a while. The problem is that I want the user to realize that something is happening right away. The button, however, doesn't change its style right away. As long as I'm triggering something else, whether it is through a passthrough property to the child as above, or through triggering a redux action, it still delays changing color for a few seconds.

I want to change color right away without delay, so the user knows not to keep repushing it. How can I accomplish this?

react - how to force an element to redraw immediately

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在react组件中有一个切换按钮：toggleSpeak = () => { this.setState({buttonOn: !this.state.buttonOn});}并且该按钮根据其状态改变其样式： <img key="headphones" className={audioclass} src={th...

问react -如何强制元素立即重绘
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react -如何强制元素立即重绘EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react -如何强制元素立即重绘
EN