Как использовать show.js с Deno Fresh?

В моем понимании 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. Почему это?

useEffect работает только в браузере, поэтому бит if (IS_BROWSER) должен быть избыточным. Используйте useEffect(() => { ... }, []), чтобы убедиться, что эффект запускается только один раз. Без пустого массива эффект будет повторяться при каждом рендеринге, чего вам, вероятно, не нужно.
rschristian 09.07.2024 10:43

В этом коде я не уверен, как он будет перерисован без моего подтверждения, так что, думаю, все будет в порядке. Даже с пустым массивом проблема не решена

Ooker 09.07.2024 10:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не забудьте добавить стили к 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" />

Другие вопросы по теме