Svelte でオブジェクトを props として渡すと、HTML のオブジェクト フィールドが変更されなくなりますか?

Question

次の Svelte コードがあります:

Player.svelte:

リーリー

PlayerControls.svelte:

リーリー

再生アイコンを押すと、アイコンは変化しませんが、音声が開始されます。もう一度クリックすると、音声は停止しますが、アイコンは変化しません。 audio.paused はスクリプト内でのみ「変更」し、HTML 内では変更しないようです。ここで何が問題になっているのでしょうか?また、Svelte について理解できない点は何ですか?

Answer 1

与えられたケースにおいて、最も堅牢な解決策は、特定の <audio> 要素 Events を利用して、svelte に参照のステータスを再確認するよう警告することです。これにより、svelte がリスナーのライフサイクルを管理できるようになり、再生状態がいつどのように変化するかというすべてのエッジケースを要素自体で処理できるようになります。

リーリー

REPL

元の回答

私のコメント内のドキュメントリンクは、あなたの問題 反応性/配列とオブジェクトの更新 に対する簡単な解決策をカバーしています。これは、単に audio を onClick# として再割り当てすることです ##ハンドラーの最後のステップ。

音声が自然に終了した場合、

paused の変更は追跡されないことに注意してください。 リーリー

REPL ＃＃＃編集＃＃＃

私は最初、

paused

属性を直接変更することを提案しました:

リーリー ただし、audio

が

ref であり、paused が読み取り専用プロパティであるという事実は無視されます。