В моем понимании show.js — это просто ванильный JS, поэтому при его использовании с Deno проблем быть не должно.
На routes/index.tsx
у меня есть:
import Island from "../islands/Island.tsx";
export default function Home() {
return (
<Island />
);
}
А на islands/Island.tsx
у меня есть:
import {useEffect} from 'preact/hooks'
import Reveal from '../reveal/js/index.js';
export default function Island() {
useEffect(()=> {
const deck = new Reveal()
deck.initialize();
}, [] )
return (
<div class = "reveal">
<div class = "slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
)
}
Я ожидаю, что это вернет простой слайд в браузере, но в левом нижнем углу отображается текст Resume presentation
. Почему это?
В этом коде я не уверен, как он будет перерисован без моего подтверждения, так что, думаю, все будет в порядке. Даже с пустым массивом проблема не решена
Не забудьте добавить стили к routes/_app.tsx
:
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/reveal.css" />
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/reset.css" />
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/theme/simple.css" />
useEffect
работает только в браузере, поэтому битif (IS_BROWSER)
должен быть избыточным. ИспользуйтеuseEffect(() => { ... }, [])
, чтобы убедиться, что эффект запускается только один раз. Без пустого массива эффект будет повторяться при каждом рендеринге, чего вам, вероятно, не нужно.