React 框架

有几种不同的方法可以将 Reveal.js 添加到 React 项目中。

  1. 通过 npm 安装和设置 reveal.js
  2. 使用第三方包

通过 npm 安装

你可以在 JavaScript/TypeScript 源文件中添加并初始化 reveal.js，比如 main.tsx 或 app.tsx。

你可以全局执行此操作，即在应用程序/组件函数的外部或其中之一内部执行。在后一种情况下，你必须小心不要堆叠初始化。仅初始化幻灯片组一次。如果你需要重新配置，请使用 configure 函数或在重新初始化之前 destroy 组。

首先，使用 npm 安装 reveal

npm install reveal.js

如果你使用 TypeScript，你还需要安装类型

npm i --save-dev @types/reveal.js

导入

你需要以下导入

import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css'; // "black" theme is just an example

初始化

最后，添加 初始化代码，它最适合您项目的需要。

如果您决定在应用程序或组件函数中初始化幻灯片组，而幻灯片组容器在返回的 JSX 中，我们建议您使用 useEffect 钩子来执行此操作。这将确保在首次呈现容器后初始化。

还建议使用 refs 以维护幻灯片组容器 div 和相应的 reveal 实例。这些 refs 可帮助确保每个幻灯片组仅初始化一次。

下面是一个完整的工作示例

// App.tsx
import { useEffect, useRef } from "react";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";

function App() {
    const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
    const deckRef = useRef<Reveal.Api | null>(null); // reference to deck reveal instance

    useEffect(() => {
        // Prevents double initialization in strict mode
        if (deckRef.current) return;

        deckRef.current = new Reveal(deckDivRef.current!, {
            transition: "slide",
            // other config options
        });

        deckRef.current.initialize().then(() => {
            // good place for event handlers and plugin setups
        });

        return () => {
            try {
                if (deckRef.current) {
                    deckRef.current.destroy();
                    deckRef.current = null;
                }
            } catch (e) {
                console.warn("Reveal.js destroy call failed.");
            }
        };
    }, []);

    return (
        // Your presentation is sized based on the width and height of
        // our parent element. Make sure the parent is not 0-height.
        <div className="reveal" ref={deckDivRef}>
            <div className="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>
    );
}

export default App;

请注意在 Reveal 构造函数中使用 deckDivRef。如果您希望将多个组添加到同一 React 应用程序中，这一点很重要。

React 传送门

如果您只想将一些组件点缀到特定的幻灯片中，我们建议将 reveal.js DOM 树保留在 React 外部，并使用 React 传送门 将 React 组件放置在特定的部分中。

第三方包

以下第三方包对于将 Reveal.js 演示文稿添加到 React 项目或将 React 组件/应用程序添加到 Reveal.js 演示文稿可能很有用