Svelte에서 객체를 소품으로 전달하면 HTML의 객체 필드가 ​​변경되지 않습니까?

Question

다음 Svelte 코드가 있습니다:

player.svelte:

으아아아

PlayerControls.svelte:

으아아아

재생 아이콘을 누르면 아이콘은 바뀌지 않지만 오디오가 시작되고, 다시 클릭하면 오디오가 중지되고 아이콘이 바뀌지 않습니다. audio.paused는 HTML이 아닌 스크립트에서만 "변경 사항"을 사용한 것 같습니다. 여기서 문제는 무엇이며 Svelte에 대해 내가 이해하지 못하는 것은 무엇입니까?

Answer 1

해당 사례에서 가장 강력한 솔루션은 특정 <audio> 요소 event를 활용하여 svelte에 심판 상태를 다시 확인하도록 알리는 것입니다. 이를 통해 svelte는 리스너 라이프사이클을 관리할 수 있으며 요소 자체가 재생 상태가 언제/어떻게 변경되는지에 대한 모든 극단적인 경우를 처리할 수 있습니다.

으아악

REPL

원래 답변

내 댓글에 있는 문서 링크는 문제 Reactive/Update Arrays and Objects 를 해결하는 간단한 방법을 다루고 있습니다. 이는 핸들러의 audio 作为 onClick마지막 단계를 간단히 재할당하는 것입니다.

오디오가 저절로 끝나는 경우 paused의 변경 사항은 추적되지 않습니다.

으아악

REPL

편집

처음에는 paused 속성을 직접 변경할 것을 제안했습니다.

으아악

그러나 audio가 ref이고 audio 是 ref 且 paused가 읽기 전용 속성이라는 사실을 무시합니다.