前端【免费下载链接】reveal.jsThe HTML Presentation Framework项目地址https://gitcode.com/gh_mirrors/re/reveal.js点击查看免费下载导读revealjs/react是 Reveal.js 演示框架的官方轻量级 React 封装它以 React 组件的方式描述幻灯片Deck/Slide由封装层负责与 Reveal.js 实例的生命周期、配置、事件与同步机制对接。本文将基于仓库中 react/README.md 的完整文档结合 react/src/components/ 下各组件源码讲解从安装、搭建第一个 Deck、使用Fragment/Code/Stack/Markdown组件、通过config与plugins配置 Reveal到订阅事件、访问 Reveal API 的完整实战路径并深入剖析其初始化、同步sync、配置configure与事件绑定的底层实现帮助你在 React 应用中安全、高效地集成 Reveal.js。安装与依赖revealjs/react只提供 React 绑定层Reveal 核心、样式、主题与插件仍需以 peer dependency 形式显式安装。在仓库中该包源码位于 react/src/npm i revealjs/react reveal.js react react-dom # 或 yarn add revealjs/react reveal.js react react-dom安装后你依然需要自行引入 Reveal 的 CSS、主题以及 Deck 用到的插件例如import reveal.js/reveal.css; import reveal.js/theme/black.css;搭建第一个 DeckDeck 与 SlideDeck负责创建并管理一个 Reveal 实例Slide则对应一张幻灯片。最基础的用法是渲染一个Deck内部包含一个或多个Slideimport { Deck, Slide } from revealjs/react; import reveal.js/reveal.css; import reveal.js/theme/black.css; export function Presentation() { return ( Deck Slide h1Hello/h1 pMy first Reveal deck in React./p /Slide Slide background#111827 h2Second slide/h2 /Slide /Deck ); }从源码结构看Deck渲染的 DOM 结构与 Reveal.js 原生要求完全一致外层是带有reveal类的div可通过className追加自定义类名内层是slides容器所有Slide渲染为section元素参见 deck.tsx。这意味着原生 Reveal 的 CSS、主题与插件机制都能无缝工作。常用组件Fragment、Code、Stack 与 Markdown除了Deck与Slide该包还提供四类覆盖常见幻灯片模式的组件公共导出见 index.tsFragment让内容按步骤逐条呈现step-by-step 揭示Code借助 highlight 插件渲染带语法高亮的代码块Stack将多张幻灯片纵向分组Markdown直接渲染 Reveal 兼容的 Markdown 幻灯片无需注册 Reveal 的 markdown 插件。组合示例来自 react/README.mdimport { Deck, Slide, Stack, Markdown, Fragment, Code } from revealjs/react; import RevealHighlight from reveal.js/plugin/highlight; import reveal.js/plugin/highlight/monokai.css; export function Presentation() { return ( Deck plugins{[RevealHighlight]} Slide h2Step by step/h2 Fragment animationfade-up aspFirst point/Fragment Fragment animationfade-up asChild divSecond point/div /Fragment Code languagejavascript lineNumbers {console.log(Hello, world!);} /Code /Slide Stack SlideVertical 1/Slide SlideVertical 2/Slide /Stack Markdown separator^\n---\n$ verticalSeparator^\n--\n$ options{{ smartypants: true, animateLists: true }} { ## Markdown 1.1 - First item !-- .element: classfragment -- - Second item !-- .element: classfragment -- -- ## Markdown 1.2 Notes: These become speaker notes. --- !-- .slide:>import { Deck, Slide } from revealjs/react; import reveal.js/reveal.css; import reveal.js/theme/black.css; import reveal.js/plugin/highlight/monokai.css; import RevealHighlight from reveal.js/plugin/highlight; export function Presentation() { return ( Deck config{{ width: 1280, height: 720, hash: true, controls: true, progress: true, transition: slide, }} plugins{[RevealHighlight]} SlideConfigured deck/Slide /Deck ); }从源码看plugins在首次挂载时通过initialPluginsRef捕获一次后续渲染即使传入新数组也会被忽略见 deck.tsx。config在每次渲染时被浅比较hasShallowConfigChanges见 deck.tsx只有当值真正变化时才调用reveal.configure()因此父组件每次渲染新建相同内容的对象字面量不会触发多余的重配置。Slide与Markdown均支持便捷的 Reveal 幻灯片属性它们在渲染时被转换为对应的data-*属性映射表见 utils/slide-attributes.ts背景类background、backgroundImage、backgroundColor、backgroundVideo、backgroundIframe、backgroundGradient、backgroundSize、backgroundPosition、backgroundRepeat、backgroundOpacity、backgroundTransition等可见性与动画visibilityhidden/uncounted、autoAnimate、autoAnimateId、autoAnimateRestart、autoAnimateEasing、autoAnimateDuration、autoAnimateDelay、autoAnimateUnmatched行为类transition、transitionSpeed、autoSlide、notes、backgroundInteractive、preload。除此之外Slide仍会透传任意原生data-*属性到渲染出的section上SlideProps类型定义见 types.ts。订阅事件Deck通过事件 props 响应 Reveal 的生命周期与导航事件事件名与 Reveal 原生事件一一对应完整映射见 deck.tsximport { Deck, Slide } from revealjs/react; export function Presentation() { return ( Deck onReady{(deck) { console.log(Reveal ready, deck); }} onSync{() { console.log(Deck synced); }} onSlideChange{(event) { console.log(Slide changed, event.indexh, event.indexv); }} onFragmentShown{(event) { console.log(Fragment shown, event.fragment); }} SlideIntro/Slide SlideNext/Slide /Deck ); }支持的完整事件列表包括onSync、onSlideSync、onSlideChange、onSlideTransitionEnd、onFragmentShown、onFragmentHidden、onOverviewShown、onOverviewHidden、onPaused、onResumed。回调在初始化完成后通过deck.on()绑定并在回调变化或组件卸载时通过deck.off()清理见 deck.tsx因此切换回调不会产生监听器泄漏。访问 Reveal API组件树内useReveal()在Deck内部任意组件中调用useReveal()即可拿到 Reveal 实例直接调用其 APIimport { Deck, Slide, useReveal } from revealjs/react; function NextButton() { const deck useReveal(); return button onClick{() deck?.next()}Next slide/button; } export function Presentation() { return ( Deck Slide h2Controlled from React/h2 NextButton / /Slide /Deck ); }useReveal()的实现就是对RevealContext的取值Deck通过RevealContext.Provider向下提供实例见 reveal-context.ts 与 index.ts。组件树外deckRef需要跳出组件树访问实例时向Deck传入deckRefimport { useRef } from react; import { Deck, Slide } from revealjs/react; import type { RevealApi } from reveal.js; export function Presentation() { const deckRef useRefRevealApi | null(null); return ( Deck deckRef{deckRef} SlideHello/Slide /Deck ); }deckRef在实例初始化完成并setDeck后同步赋值组件卸载时置回null见 deck.tsx。工作原理生命周期、同步与性能设计结合 AGENTS.md 中的设计约束与 deck.tsx 的实现封装层遵循以下核心原则生命周期。Deck在挂载时创建唯一一个 Reveal 实例new Reveal(container, { ...config, plugins })并在卸载时销毁初始化是异步的reveal.initialize()resolve 后触发onReady此后实例才可通过useReveal()与deckRef访问。实现还针对 ReactStrictMode做了防护通过teardownRequestRef计数把销毁延迟到微任务中避免严格模式下二次挂载误杀仍然存活的实例见 deck.tsx。结构同步。Reveal.sync()开销大应少调用。Deck只在渲染出的幻灯片结构发生变化新增、删除、重排 slide或进出纵向 Stack时才调用sync()它递归遍历.slides下的section树生成结构签名getSectionStructure仅在签名变化时同步见 deck.tsx。而Slide内部普通的 React 内容更新不会触发全量同步——Slide只在自身的data-*属性实际变化后调用轻量的reveal.syncSlide()见 slide.tsx首次渲染由父级Deck.sync()统一处理。配置同步。config浅比较后才调用reveal.configure()且configure()本身在 Reveal 内部会执行一次 sync因此封装层用skipNextSyncRef跳过随后的冗余同步见 deck.tsx。事件绑定。事件 props 在初始化后用deck.on()接线回调变化或卸载时用deck.off()解绑切换回调自动替换监听器。验证与测试仓库为每个组件都配备了同目录的*.test.tsx行为测试如 deck.test.tsx、slide.test.tsx、markdown.test.tsx 等测试设置位于 react/src/tests/setup.ts。改动封装层后可在仓库内运行以下命令验证npm test --prefix react npm run build --prefix react此外 react/demo/src/demo-app.tsx 提供了一个完整的可运行示例应用是快速上手与验证 API 行为的最直观参考。赞分享前端【免费下载链接】reveal.jsThe HTML Presentation Framework项目地址https://gitcode.com/gh_mirrors/re/reveal.js点击查看免费下载相关推荐使用 spectacle-mdx-loader 在 Spectacle 中构建 MDX 演示文稿webpack 配置与加载器原理全解析使用 spectacle mdx loader 在 Spectacle 中构建 MDX 演示文稿webpack 配置与加载器原理全解析 导读 spectacl前端UI组件VirtualSMC高级配置技巧如何针对特定硬件优化系统管理VirtualSMC高级配置技巧如何针对特定硬件优化系统管理 VirtualSMC是macOS黑苹果系统的终极SMC模拟器它为Hackintosh用户提供了gh_mirrors/da/dataviz中的不确定性可视化置信区间与误差棒的正确使用gh_mirrors/da/dataviz中的不确定性可视化置信区间与误差棒的正确使用 在数据可视化领域准确传达数据的不确定性是确保结果可靠性的关键环节。g文档/教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考